將節點移動到單獨的組件文件中沒有節點

我沒有使用Node，如何將當前位於text/babel腳本標籤中的反應代碼（jsx）移動到單獨的組件文件中？我試圖移動它們，然後在HTML文件中引用它們，但只要它觸及HTML的第一位，就會引發語法錯誤，我已經嘗試了文件的兩個.jsx和.js擴展名，並且在包含它時給出它是文本/巴貝爾的腳本類型。將節點移動到單獨的組件文件中沒有節點

<script src="components/nav.jsx" type="text/babel" ></script> 
<script src="components/map.jsx" type="text/babel" ></script> 
<script src="components/app.jsx" type="text/babel" ></script>

來源

2016-02-29 Jacob Mason

能否請您粘貼錯誤信息？順便說一句我建議使用webpack而不是使用'text/babel'腳本標籤 – TIJ

@TIJ如果我把它放在一個單獨的文件中，它可以正常工作。但是，如果我分割它，然後引用它們，我會得到'Navbar未定義'。我將更新與我如何參考文件的帖子。 –

如果您在瀏覽器中轉換JSX，則必須將每個組件附加到窗口對象。

舉個例子：

var Nav = React.createClass({ ... }); 
window.Nav = Nav;

或者更簡潔：

window.Nav = React.createClass({ ... });

來源

2016-03-14 15:48:35

這在技術*作品*然而被認爲是不好的實踐。請參閱[Dmitriy的更多答案]（https://stackoverflow.com/a/37764638/1339693） –

Jim Nielsen是正確的，但它被認爲是一個不好的做法，暴露你的部分代碼到全球範圍，在瀏覽器中傳輸JSX。相反，你應該考慮使用一些建築系統，如Webpack。

這種方式，您將能夠使用es2015 import syntax進口部件從一個文件到另一個，在一個文件中捆綁一切，很像縮小的代碼，sourcemaps，livereload等多個額外的好處

Setting up React for ES6 with Webpack and Babel

Using React with Webpack Tutorial

Related issue

來源

2016-06-11 14:04:13

將節點移動到單獨的組件文件中沒有節點

回答

相關問題