React.js：jsx es6如何分開

Question

我使用客戶端渲染，並面臨以下問題。

我有兩個位於兩個不同文件中的組件

1. 定義節點

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

2. 基節點

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

  <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

您的jsx文件在babel處理期間被包裝到閉包中。 如果要在文件之間共享某些內容，則必須將其導出。 最簡單的方法是分配給窗口：

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

window.BaseNode = BaseNode;

這是plunker中的工作示例： http ://plnkr.co/edit/EgYBIzv9AboHftcyuWys?p=preview

但是這種方式僅適用於小型應用程序和示例。 如果您要構建一些嚴肅的東西，請使用模塊系統來為您完成這項工作，例如，嘗試使用SystemJS或Webpack 。