React组件挂载报错：目标容器非DOM元素，求代码正确放置位置

错误原因 #

你遇到的Target container is not a DOM element报错，核心有两个问题：

1. ReactDOM.createRoot用法错误：正确逻辑是ReactDOM.createRoot(目标DOM容器).render(要挂载的组件)，你把组件和容器参数搞混，导致传入createRoot的不是合法DOM元素。
2. 执行时机不对：挂载代码放在函数组件DOM1最顶部时，组件的JSX还未渲染，document.getElementById("mounthere")找不到对应节点，返回null，无法作为挂载容器。

正确写法 #

方案1：React组件组合（推荐） #

无需手动调用ReactDOM.createRoot，直接在DOM1的JSX中渲染Comp1，这是React标准用法：

const DOM1 = () => {
  function function1() { } // 补全你的函数逻辑
  const handleScroll = () => { } // 补全滚动处理逻辑

  useEffect(() => {
    window.addEventListener("scroll", handleScroll);
    return () => window.removeEventListener("scroll", handleScroll);
  }, []);

  return (
    <div className="DOM1-container">
      <Header />
      <div className="dom1">
        <div id="mounthere">
          {/* 直接渲染Comp1 */}
          <Comp1 />
        </div>
      </div>
    </div>
  );
}

方案2：手动挂载（仅特殊场景使用） #

如果必须手动调用ReactDOM.createRoot，要把代码放在useEffect中，确保DOM节点已存在：

const DOM1 = () => {
  function function1() { }
  const handleScroll = () => { }

  useEffect(() => {
    const mountContainer = document.getElementById("mounthere");
    if (mountContainer) {
      // 正确调用createRoot和render
      const root = ReactDOM.createRoot(mountContainer);
      root.render(<Comp1 />);
    }

    window.addEventListener("scroll", handleScroll);
    return () => {
      window.removeEventListener("scroll", handleScroll);
      // 组件卸载时清理root
      const mountContainer = document.getElementById("mounthere");
      if (mountContainer) {
        ReactDOM.createRoot(mountContainer).unmount();
      }
    };
  }, []);

  return (
    <div className="DOM1-container">
      <Header />
      <div className="dom1">
        <div id="mounthere"></div>
      </div>
    </div>
  );
}

另外，你的Comp1类组件有语法错误，修正后：

class Comp1 extends React.Component {
  content1 = () => {
    // 补全你的content1逻辑
  };

  componentDidMount() {
    this.content1();
  }

  render() {
    return (
      <div id="div1"></div>
    );
  }
}

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