React.js：如何分开jsx es6

Question

我使用客户端呈现并面临以下问题。

我有分别位于两个不同的文件

1. DefinitionNode两种组分

class DefinitionNode extends BaseNode{ 
 
\t render() { 
 
\t \t return (
 
\t \t \t <div></div> 
 
\t \t); 
 
\t } 
 
}

BaseNode

class BaseNode extends React.Component{ 
 
\t render() { 
 
\t \t return (
 
\t \t \t <div></div> 
 
\t \t); 
 
\t } 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.2/react.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.2/react-dom.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script> 
 
     
 
    <script type="text/babel" src="~/Scripts/reactApp/fieldGeneration/baseNode.jsx"></script> 
 
    <script type="text/babel" src="~/Scripts/reactApp/fieldGeneration/definitionNode.jsx"></script>

后去页我得到一个错误：BaseNode没有定义

如何让独立的组件是正确的？

Answer 1

在babel处理过程中，您的jsx文件被封装到闭包中。如果你想分享文件之间的东西，你必须导出它。最简单的方法是将它赋予窗口：

class BaseNode extends React.Component { 
    render() { 
    return (
     <div></div> 
    ); 
    } 
} 

window.BaseNode = BaseNode; 

这里是工作在plunker例如：http://plnkr.co/edit/EgYBIzv9AboHftcyuWys?p=preview

但这种方式只适用于小型应用和实例。如果您正在构建严重问题，请使用将为您完成此项工作的模块系统，请尝试SystemJS或Webpack，例如