Question

我正在尝试创建多个反应注释框，我使用的是使用#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')
);

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

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

我怎样才能实现这个目标？

不是重复，这是想要应用于所有人，而不仅仅是一个带有类名

的人

Answer 1

document.getElementsByClassName()返回HTMLCollection个DOM元素，而不是React所需的单个元素。

要在第一个应用中呈现您的应用，只需通过访问索引为零的元素来传递集合的第一项：

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

Answer 2

您无法通过定位类来呈现组件，如果这样做，您将收到此异常未捕获错误：不变违规：_registerComponent（...）：目标容器不是DOM元素。要解决此问题，只需将<div class="laravelista-comments"></div>更改为<div id="laravelista-comments"></div>，最后再将

更改为

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

希望这对你有帮助吗？

Answer 3

很抱歉，我刚刚遇到同样的问题。它似乎有点奇怪，但它适用于我，我不知道为什么:)

mul0(x,y)

希望这会对某人有所帮助！

尝试将多个响应呈现给多个div而不是ID

3 个答案: