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

Question

I'm new to React, I'm trying to declare a class and use it to render multiple div in different renders, can you please let me know if something is wrong with my approach?

I'm getting an Invariant Violation on the second render

codepen example

Class

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

Render

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

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

And in the HTML

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

Answer 1

Firstly HTML doesn't use JSX syntax. If you render a React class somehow to an HTML element, you have to use valid child HTML syntax.

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

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

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

You can create DIVs which are same class names in your HTML file.

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


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

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