在HTML中，两个或多个元素不能有相同的id。使用不同的id

<div id='my-id-one'></div>
    some html
    <div id='my-id-two'></div>

并为每个ID分别调用ReactDOM.render。

ReactDOM.render(
      <MyComponent />,
      document.getElementById('my-id-one')
    );
    
    ReactDOM.render(
      <MyComponent />,
      document.getElementById('my-id-two')
    );

看起来你想在两个不同的地方渲染它，中间有非React代码。为此，您需要为div x提供给予不同的ID：

<div id='my-id></div>
some html
<div id='my-other-id></div>

然后将组件渲染到每个div：

ReactDOM.render(
    <MyComponent />,
    document.getElementById('my-id')
);

ReactDOM.render(
    <MyComponent />,
    document.getElementById('my-other-id')
);

你可以做

ReactDOM.render(
     <div>
       <MyComponent />
       <MyComponent />
     </div>, document.getElementById('my-id') );

或者你也可以有两个不同id的div标签

<div id='one'></div>
some html
<div id='two'></div>

然后

ReactDOM.render(
  <MyComponent />,
  document.getElementById('one')
);

ReactDOM.render(
  <MyComponent />,
  document.getElementById('two')
);

另一种选择是使用class来定义要渲染的元素：

<div id="my-id-one" class="render-here"></div>
some html
<div id="my-id-two" class="render-here"></div>

js：

let elements = document.getElementsByClassName('render-here');
elements.map(element => ReactDOM.render(
  <MyComponent />,
  element
));