Reactjs在不同的html頁面上呈現組件

Question

我正在構建一個新的Nodejs應用程序，我想對某些組件使用Reactjs。 到目前爲止，我有兩個HTML頁面;主頁和my_orders頁面。 主頁顯示所有食品項目，my_orders頁面顯示用戶訂購的食品項目。

爲此，我構建了2個反應組件，一個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-box在my_orders頁面。

這不起作用，因爲當我渲染index.html my-meals-box不是真正的id，反之亦然。 理想的方法是能夠在HTML頁面中調用渲染並使用正確的道具渲染元素。

我可以使用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文件。

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

Answer 2

哇，這有點讓我困惑。您是否只在React中構建了一半的應用程序？如果是這樣，爲什麼？

我習慣這樣想的方式是：所有的單一應用程序。或單頁面應用程序。一個index.html頁面和其餘內容在所述頁面內動態生成。然後你只需要確保顯示的網站URL和內容是一致的。你會使用反應路由器（https://github.com/ReactTraining/react-router）。

此外，我沒有得到您發佈的代碼。如果你能澄清這一點，可能會更容易麻煩拍攝。你聲明瞭一個組件MealsContainer，但你實際上並沒有調用它。相反，你打電話給MealsBox？你是否像這樣導出組件？

我從來沒有在ReactDom.render方法中看到過使用url作爲道具來傳遞它。 我不確定這是否有效。假設它沒有，那麼你在調用可能不存在的不同DOM元素上的相同組件。

如果您不想使用路由器，那麼您可能能夠解決的方法是在當前.html加載時調用單獨的js文件。

//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'))