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