Javascript 尝试呈现多个对多个div而不是ID的反应

我正在尝试创建多个react注释框，我使用的是一个使用#id而不是类的包，因此只呈现1，而不是全部。我已尝试将

GetelemntbyID

更改为

getelemensbyclassname

，但出现错误：

未捕获错误：_registerComponent（…）：目标容器不是DOM 元素

我的代码

import React from 'react';
import ReactDOM from 'react-dom';
import CommentBox from './components/CommentBox.jsx';

window.Laravelista = window.Laravelista || {content_type: null, content_id: null, login_path: '/login'};

ReactDOM.render(
  <CommentBox content_type={Laravelista.content_type} content_id={Laravelista.content_id} login_path={Laravelista.login_path} />,
  document.getElementsByClassName('laravelista-comments')
);

从“React”导入React；
从“react dom”导入react dom；
从“/components/CommentBox.jsx”导入CommentBox；
window.Laravelista=window.Laravelista |{content_类型：null，content_id:null，login_路径：'/login'}；
ReactDOM.render(
,
document.getElementsByClassName（'laravelista-comments'）
);

我正在尝试将它们呈现给以下div：

<div class="laravelista-comments"></div>

我怎样才能做到这一点

不是重复的，这要应用于所有元素，而不仅仅是具有类名的元素，

返回DOM元素的

HTMLCollection

，而不是React所需的单个元素

要在第一个应用程序中呈现应用程序，请仅通过访问索引0处的元素来传递集合的第一项：

ReactDOM.render(
    <CommentBox content_type={Laravelista.content_type} content_id={Laravelista.content_id} login_path={Laravelista.login_path} />,
    document.getElementsByClassName('laravelista-comments')[0]
);

ReactDOM.render(
,
document.getElementsByClassName（'laravelista-comments'）[0]
);

返回DOM元素的

HTMLCollection

，而不是React所需的单个元素

要在第一个应用程序中呈现应用程序，请仅通过访问索引0处的元素来传递集合的第一项：

ReactDOM.render(
    <CommentBox content_type={Laravelista.content_type} content_id={Laravelista.content_id} login_path={Laravelista.login_path} />,
    document.getElementsByClassName('laravelista-comments')[0]
);

ReactDOM.render(
,
document.getElementsByClassName（'laravelista-comments'）[0]
);

您不能通过目标类来呈现组件，如果这样做，您将得到以下异常未捕获错误：不变冲突：\u registerComponent（…）：目标容器不是DOM元素。要解决此问题，只需将

更改为

，最后

ReactDOM.render(
  <CommentBox content_type={Laravelista.content_type} content_id={Laravelista.content_id} login_path={Laravelista.login_path} />,
  document.getElementById('laravelista-comments')
);

ReactDOM.render(
,
document.getElementById（'laravelista-comments'）
);

---

希望这对您有所帮助？

您不能通过目标类来呈现组件，如果您这样做，您将得到此异常未捕获错误：不变冲突：_registerComponent（…）：目标容器不是DOM元素。要解决此问题，只需将

更改为

，最后

ReactDOM.render(
  <CommentBox content_type={Laravelista.content_type} content_id={Laravelista.content_id} login_path={Laravelista.login_path} />,
  document.getElementById('laravelista-comments')
);

ReactDOM.render(
,
document.getElementById（'laravelista-comments'）
);

---

希望这对你有帮助？

很抱歉，我也遇到了同样的问题。这似乎有点古怪，但对我来说很管用，我不知道为什么：）

if（document.getElementsByClassName（'addToCart\uu按钮'））{
if（NodeList.prototype.forEach的类型==“未定义”）{
NodeList.prototype.forEach=Array.prototype.forEach；
}
if（HTMLCollection.prototype.forEach的类型==“未定义”）{
HTMLCollection.prototype.forEach=Array.prototype.forEach；
}
变量节点=[]
document.getElementsByClassName（'addToCart\uu按钮'）.forEach（a=>{
节点推送（a）；
});
Nodes.forEach（a=>{
ReactDOM.render(
,
A.
)
});
}

---

希望这能帮助别人

很抱歉迟到了，我也遇到了同样的问题。这似乎有点古怪，但对我来说很管用，我不知道为什么：）

if（document.getElementsByClassName（'addToCart\uu按钮'））{
if（NodeList.prototype.forEach的类型==“未定义”）{
NodeList.prototype.forEach=Array.prototype.forEach；
}
if（HTMLCollection.prototype.forEach的类型==“未定义”）{
HTMLCollection.prototype.forEach=Array.prototype.forEach；
}
变量节点=[]
document.getElementsByClassName（'addToCart\uu按钮'）.forEach（a=>{
节点推送（a）；
});
Nodes.forEach（a=>{
ReactDOM.render(
,
A.
)
});
}

---

希望这能帮助别人

你能分享你的commentBox.jsx吗。如果你能制作一个jsfiddle来演示你的问题，那就更好了。@user3775217可能是重复的。很抱歉，如果我的代码看起来很愚蠢，我刚刚开始学习React.js。也许是一份清单？Commentbox.js+Commentboxlist.js？你能分享你的commentBox.jsx吗。如果你能制作一个jsfiddle来演示你的问题，那就更好了。@user3775217可能是重复的。很抱歉，如果我的代码看起来很愚蠢，我刚刚开始学习React.js。也许是一份清单？Commentbox.js+Commentboxlist.js？如前所述，我不想要第一个，而是页面上的每一个。@randomman在这种情况下，您必须循环通过

HTMLCollection

并为每个项目调用

ReactDOM.render（）

。您不能将多个DOM元素传递给函数。如前所述，我不想要第一个元素，而是页面上的每个元素。@randomman在这种情况下，您必须循环通过

HTMLCollection

并为每个项调用

ReactDOM.render（）

。您不能将多个DOM元素传递给函数。每个整页只能有一个id，因此它将只适用于一个元素，并且他需要针对多个元素，这就是他希望使用类的原因。每个整页只能有一个id，所以它只适用于一个元素，并且他需要针对多个元素，这就是他想要使用类的原因。