Javascript React-使用相同的类不变冲突渲染多个组件

我是新手，我试图声明一个类并使用它在不同的渲染中渲染多个div，如果我的方法有问题，请告诉我好吗

在第二次渲染时，我得到了一个不变冲突

课程

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>
    );
    }
    }

class ShoppingList扩展了React.Component{
render（）{
返回(
{this.props.name}的购物清单

Instagram
WhatsApp
眼

);
}
}

渲染

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

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

ReactDOM.render(
,
document.getElementById（'cId1'）；
ReactDOM.render(
,
document.getElementById（'cId2'）；

在HTML中

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

你好，世界

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

更改：

致：

还有,

您可以在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
  );
});

var matched=document.querySelectorAll（'.myItem'）；
匹配。forEach（功能（项目）
{
ReactDOM.render(
,
项目
);
});

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

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


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

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