我是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>
);
}
}
给予
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 />
首先,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
);
});