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

问题描述 投票:0回答:1

我是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 />
javascript reactjs
1个回答
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
  );
});
© www.soinside.com 2019 - 2024. All rights reserved.