React 17中如何正确向指定div动态添加组件？

你代码里的<MyComponent />是JSX语法糖，本质是React.createElement()返回的普通JS对象，不是浏览器能识别的真实DOM节点。原生DOM的append()方法接收到普通对象时，会默认调用toString()做类型转换，最终就会渲染出[object Object]文本。
另外在React项目中直接用原生DOM方法增删渲染内容是错误实践：React依靠虚拟DOM维护视图和状态的映射关系，手动修改真实DOM会被后续React的重渲染逻辑覆盖，很容易出现状态和视图不一致的bug。

完全不需要操作原生DOM，用组件state驱动UI渲染即可，这也是React的核心开发逻辑：

• 定义一个状态值标记游戏是否已开始
• 点击按钮时更新这个状态值，React会自动触发重渲染
• 在render逻辑里根据状态值判断：未开始时显示按钮，开始后隐藏按钮、在目标div中渲染自定义组件

完整代码示例：

class App extends React.Component {
  state = {
    isGameStarted: false
  }

  handleStart = () => {
    this.setState({ isGameStarted: true })
  }

  render() {
    return (
      <div>
        {/* 条件渲染：未开始时显示按钮 */}
        {!this.state.isGameStarted && (
          <button onClick={this.handleStart}>
            Start Game
          </button>
        )}
        <div id="a8">
          {/* 条件渲染：开始后挂载自定义组件 */}
          {this.state.isGameStarted && <MyComponent />}
        </div>
      </div>
    );
  }
}

这种写法下React会自动完成DOM的增删操作，不需要你手动调用remove()、append()方法，所有UI变化都和状态一一对应，不会出现逻辑冲突。

如果是第三方脚本嵌入这类脱离React组件树的特殊场景，必须用原生DOM方式挂载React组件，React 17版本需要用ReactDOM.render()方法完成挂载，不能直接append JSX对象：

import ReactDOM from 'react-dom';

const InitialPostition = () => {
  const startButton = document.getElementById("start-button");
  startButton.remove();
  // 调用ReactDOM方法将组件渲染到目标节点
  ReactDOM.render(<MyComponent />, document.getElementById("a8"));
};

注意：这种写法会让挂载的组件脱离React的上下文体系，props传递、状态共享、事件冒泡都可能出现异常，普通业务开发不要使用。

内容的提问来源于stack exchange，提问作者AlexTWO