javascript - React - 使用同一类渲染多个组件 - 不变违规

Question

我是 React 新手，我正在尝试声明一个类并使用它在不同的渲染中渲染多个 div，如果我的方法有问题，您能让我知道吗？

我在第二次渲染时遇到不变违规

codepen example

类别

class ShoppingList extends React.Component {
    render() {
    return (
    <div className="shopping-list">
        <h1>Shopping List for {this.props.name}</h1>
        <ul>
            <li>Instagram</li>
            <li>WhatsApp</li>
            <li>Oculus</li>
        </ul>
    </div>
    );
    }
    }

渲染

ReactDOM.render(
    <ShoppingList name="Mark" />,
    document.getElementById('cId1'));

    ReactDOM.render(
    <ShoppingList name="Mark" />,
    document.getElementById('cId2'));

在 HTML 中

<div id="id01">Hello World!</div><br /><br />
<div id="cId1" /><br /><br />
<div id="cId2" /><br /><br />

Answer 1

首先 HTML 不使用 JSX 语法。如果您以某种方式将 React 类渲染为 HTML 元素，则必须使用有效的子 HTML 语法。

更改:

<div id="cId1" />
<div id="cId2" />

致:

<div id="cId1"></div>
<div id="cId2"></div>

https://codepen.io/trdunya/pen/PLPPbM?editors=1011

还有；

您可以在 HTML 文件中创建与类名相同的 DIV。

<div class="myItem"></div>
<div class="myItem"></div>


var matched = document.querySelectorAll('.myItem');

matched.forEach(function(item)
{
  ReactDOM.render(
    <ShoppingList name="Mark" />,
    item
  );
});