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

我正在构建一个新的Nodejs应用程序，我想对一些组件使用Reactjs。 到目前为止，我有两个html页面；主页和我的订单页面。 主页显示所有食品，my_orders页面显示用户已订购的食品

为此，我构建了两个react组件，一个餐组件和一个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'))

var MealsContainer=React.createClass({
//提供正确的膳食
})
ReactDom.render（，document.getElementById（'my-founds-box'））
ReactDom.render（，document.getElementById（'founds-box'））

“膳食”框位于index.html页面中，“我的膳食”框位于“我的订单”页面中

这不起作用，因为当我呈现index.html时，我的餐盒不是真实的id，反之亦然。 理想的方法是能够在html页面中调用render，并使用正确的道具呈现元素

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

编辑：

---

我正在寻找一种标准的方法来处理在html页面中插入组件的问题。我不是在寻找快速解决方法。

哇，这让我有点困惑。您是否只在React中构建了一半的应用程序？如果是，原因是什么

我习惯于这样想：所有的应用程序都是单一的。或者一个单页应用程序。一个index.html页面和其余内容在所述页面内动态生成。然后，您只需要确保站点URL和显示的内容是一致的。您可以使用react router（）实现这一点

还有，我没有收到你发的代码。如果你能澄清这一点，解决问题可能会更容易。您声明了一个组件MealsContainer，但实际上并没有调用它。你叫MealsBox？您是这样导出组件的吗

我从未见过在ReactDom.render方法中使用url，只是将其作为道具传递我不确定这是否有效。如果不起作用，那么您将在可能不存在的不同DOM元素上调用相同的组件

如果您不想使用路由器，那么您可以使用单独的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'))

//将组件MealsBox呈现到ID为box的现有元素中
ReactDom.render（，document.getElementById（'founds-box'））
//将MealsBox呈现到ID为my Founds box的现有元素中
ReactDom.render（，document.getElementById（'my-founds-box'））

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

-common.js//将包含组件
-index-page.js//将在my Founds box元素中呈现
-my-orders-page.js//将在“膳食盒”元素中呈现。

然后在

index.html

中，您应该包括

common.js

和

index page.js

文件。在

my_orders.html

中，您应该包括

common.js

和

my orders页面.js

文件

---

您甚至可以使用一个名称约定，即每个以-page结尾的js文件都是一个入口点，以避免每次添加新页面时都必须手动执行该操作。

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

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

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

---

我还没有衡量它的性能或可伸缩性。因此，我也想听听您的意见，为什么不在html中使用id呢？index.html页面没有“我的餐盒”id，也不应该这样。我注意到我的代码示例中有一个错误。my Founds box应该是第一个渲染实例的id。这可能就是困惑！让我编辑一下。。。首先检查元素是否存在？看起来已经够直截了当了。@DaveNewton我在寻找程序员处理这种情况的标准方法；除非没有standard@NicolaPedretti“标准”方法是在尝试渲染之前先查看元素是否存在——这似乎是一种合理的方法。我选择react而不是angular的原因之一是，我只能在react中创建我的应用程序的一部分，其余部分保留在html中。我只想在我需要的地方使用它。MealBox/MealContainer问题是抄写代码的错误。我编辑了它！1） URL正在作为属性传递。2） React非常适合将组件逐个放到简单的应用程序中；这是它的卖点之一——它不会强迫你完全重写。对于一个新的应用程序来说，它是否有意义是另一个问题；在我看来，如果只有少量的动态内容，你只需要少量的反应。谢谢你，这是一种更干净的方式！