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，例如