据我所知，这是做你要求的事情的唯一方法（因为我正在尝试做同样的事情）：

let divs = document.getElementsByClassName("some_class")
for (let i = 0; i < divs.length; i++) {
    const id = Math.random() //or some such identifier 
    const d = document.createElement("div")
    d.id = id
    divs[i].appendChild(d)
    ReactDOM.render(<SomeComponent/>, document.getElementById(id))
}

如果有人知道一个更干净/更好的方法来将react组件附加到现有的<div>，而不首先附加新的空<div>，请插话！

当你在div中渲染一个react组件时，它的内容将被你创建的组件的内容所替换。

<script src="https://facebook.github.io/react/js/jsfiddle-integration.js"></script>
<div class = 'outer-container'>
<p>
I can see this hello.
</p>
<div id="container">
    <!-- This element's contents will be replaced with your component. -->
    <p>
      Hello React
    </p>
</div>

</div>

JSX

var Hello = React.createClass({
    render: function() {
    return (
      <div className="Button">
        <span className="left" onClick={function() {alert("left")}}>Left</span>
        <span className="right" onClick={function() {alert("right")}}>Right</span>
        <span className="middle" onClick={function() {alert("middle")}}>Middle</span>
      </div>
    );
    }
});

ReactDOM.render(<Hello name="World" />, document.getElementById('container'));

你可以在这里看到一个小提琴：JSFIDDLE

你必须有一些 Package 容器来存放你不想被覆盖的东西。它应该是这样的：

<div id='wrapper-container'>
   <p>Hello, React! Content before</p>
   <div id='container'></div>
   <p>Content after</p>
</div>

是的，使用dangerouslySetInnerHTML可以保留现有内容。考虑到这个名字，你可能已经猜到这不是最推荐的方法，但它有效：
HTML：

<div id = "container">Hello, React!</div>

JS：

var Component = React.createClass({
  render: function(){
    return(
      <div>{this.props.children}<p>Hello to you too!</p></div>
    )
  }
})
var c = document.getElementById("container");
ReactDOM.render(React.createElement(Component, {}, <div className="children"
    dangerouslySetInnerHTML={{ __html: c.innerHTML }}></div>), c);

看看这个fiddle，看看它的实际效果。

最好的方法是创建另一个div元素，然后将其附加到容器中，然后获取Elementid并在其中呈现组件。这意味着每个渲染器都有自己的父级站在容器div中。

除了其他答案，React 18警告您需要使用createRoot。
你可以通过替换ReactDom.render来修复它：

import { createRoot } from 'react-dom/client';

createRoot(document.getElementById("container")).render( <Component/>)