Question

我是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 />

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

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

1 个答案: