如何使用一個.js文件中定義ReactJS組件

-1

我在HTML文件中像下面的定義我reactjs組件的HTML文件：如何使用一個.js文件中定義ReactJS組件

<script type="text/babel"> 
var WorkHistory = React.createClass({ 
...... 
}); 
        ReactDOM.render(
         <WorkHistory 
         />, 
         document.getElementById('work_history') 
        ); 
</script>

現在，我可以很容易地在我的HTML頁面中使用此。但是，我需要寫這樣整個全部代碼：

WORKHISTORY.js文件：

var WorkHistory = React.createClass({ 
    ...... 
    });

WORKHISTORY.html文件：

<script type="text/babel"> 
         ReactDOM.render(
          <WorkHistory 
          />, 
          document.getElementById('work_history') 
         ); 
</script>

我怎樣才能做到這一點??

來源

2016-07-27 Abhay

如果我正確理解您的問題，您希望將組件編寫在單獨的.js文件中，並且能夠在<script> -tag中使用ReactDOM.render？

如果是這樣的情況下，簡單地包括<script>標籤都有效與src -attribute設置爲您的文件的路徑之前渲染標籤，按我的例子：

<script src="./path/to/workhistory.js"></script> 
<script type="text/babel"> 
    ReactDOM.render(
    <WorkHistory />, 
    document.getElementById('work_history') 
); 
</script>

來源

2016-07-27 14:19:25 ahstro

在這種情況下，我得到錯誤： 'ReferenceError：WorkHistory未定義' – Abhay

噢，我現在看到你正在使用Babel來傳譯你的代碼。 Babel會轉換你的代碼，並在其前面加上''strict strict''，它封裝了這個文件的範圍，阻止你的其他'script'標籤訪問它的變量。如果你只是測試東西，你可以在分配和訪問你的變量時使用全局範圍 - 「窗口」 - 但更好的解決方案是使用[構建系統]（https：// babeljs）。 io/docs/setup /）而不是Babel。 – ahstro

如何使用一個.js文件中定義ReactJS組件

回答

相關問題