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-meal-box位于my_orders页面。

这不起作用，因为当我渲染index.html时，my-meal-box不是真正的id，反之亦然。理想的方法是能够在html页面中调用render并使用正确的props渲染元素。

我可以使用webpack创建不同的.js文件，以便在不同的html页面中导入，但我真的不喜欢这个想法。对于这种情况，Reactjs的最佳实践是什么？

编辑：

我正在寻找一种标准方式，部分反应应用处理在html页面中插入组件。我不是在寻找快速的解决方法。

Answer 1

考虑到它们是不同的页面，并且随着系统的增长它们可能会有更多的差异，例如，更合理的可持续方法是将构建拆分为多个入口点。 p>

- 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 router（https://github.com/ReactTraining/react-router）。

另外，我没有收到您发布的代码。如果你能澄清那一个，那么麻烦射击可能会更容易。您声明了一个组件MealsContainer，但实际上并没有调用它。相反，你打电话给MealsBox？你是否那样导出了这个组件？

我从未见过在ReactDom.render方法中使用url而不是将其作为props传递下去。 我不确定这是否有效。假设它没有，那么你在不同的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'))

Reactjs在不同的html页面上呈现组件

3 个答案: