ReactJS在不同的HTML頁面上呈現組件

Question

我正在構建一個新的Nodejs應用程序，我想將Reactjs用於某些組件。 到目前為止，我有兩個html頁面； 主頁和my_orders頁面。 主頁顯示所有食品，而my_orders頁面顯示用戶訂購的食品。

為此，我構建了2個React組件，一個Meal組件和一個MealContainer組件。 我需要將MealContainer組件放在index.html頁面和my_orders.html頁面中。 到目前為止，我有這個：

var MealsContainer = React.createClass({
 //render the right meals
})

ReactDom.render(<MealsContainer url='/getMyMeals' />,document.getElementById('my-meals-box'))
ReactDom.render(<MealsContainer url='/getAllMeals'/>, document.getElementById('meals-box'))

飯盒位於index.html頁，而my-meals框位於my_orders頁。

這不起作用，因為在渲染index.html my-meals-box時，它不是真實的ID，反之亦然。 理想的方法是能夠在html頁面中調用render並使用正確的props渲染元素。

我可以使用webpack創建不同的.js文件，以將其導入不同的html頁面，但是我真的不喜歡這個想法。 在這種情況下，Reactjs最佳實踐是什么？

編輯：

我正在尋找一種標准的方法來部分響應應用程序處理在html頁面中插入組件的問題。 我不是在尋找快速解決方法。

Answer 1

考慮到它們是不同的頁面，並且隨着系統的增長它們可能會有更多差異，例如，一種更合理和可持續的方法是將構建分為多個入口點。

- common.js // Will contain the components - index-page.js // Will render in the my-meals-box element - my-orders-page.js // Will render in the meals-box element.

然后，在index.html ，應包括common.js和index-page.js文件。 在my_orders.html您應該包含common.js和my-orders-page.js文件。

您甚至可以使用一個名稱約定，即以-page結尾的每個js文件都是一個入口點，以避免每次添加新頁面時都必須手動執行此操作。

Answer 2

或者您可以使用我的解決方案：

if (window.location.pathname === '/') {
    ReactDOM.render(
        <Hello />,
        document.getElementById('react-index')
    );
} else if (window.location.pathname === '/test/') {
    ReactDOM.render(
        <TestVu />,
        document.getElementById('testVu')
    );
}

我還沒有衡量它的性能或可擴展性。 所以我也想聽聽你的意見

Answer 3

哇，這讓我有些困惑。 您僅在React中構建一半的應用程序，如果是，為什么呢？

我習慣於思考的方式是：所有一個應用程序。 或單頁應用程序。 一個index.html頁面，其余內容在該頁面內動態生成。 然后，您只需要確保網站URL和顯示的內容對齊即可。 您將為此使用react路由器（ https://github.com/ReactTraining/react-router ）。

另外，我沒有收到您發布的代碼。 如果您可以澄清這一點，則可能更容易排除故障。 您聲明了MealsContainer組件，但實際上並未調用它。 相反，您叫MealsBox？ 您是否這樣導出了組件？

除了將它作為道具傳遞外，我從未見過在ReactDom.render方法中使用URL。 我不確定這是否有效。 假設沒有，那么您將在可能不存在的不同DOM元素上調用相同的組件。

如果您不想使用Router，則可能的解決方法是使用單獨的js文件，這些文件會在當前.html加載時被調用。

//Render component MealsBox into the existing element with the ID meals-box 
ReactDom.render(<MealsBox url='/getMyMeals' />,document.getElementById('meals-box'))

//Render MealsBox into the existing element with the ID my-meals-box
ReactDom.render(<MealsBox url='/getAllMeals'/>, document.getElementById('my-meals-box'))