如何在类名获取的DOM节点中渲染React组件？报错目标容器非DOM元素怎么办

• document.getElementsByClassName() 方法返回的是类数组的 HTMLCollection 集合对象，并非单个DOM节点，而ReactDOM.render的第二个入参要求必须传入单个真实DOM容器元素，类型不匹配直接触发报错。
• 额外逻辑错误：你把ReactDOM.render方法写在了App组件的定义内部，ReactDOM.render是负责将React组件挂载到DOM的顶层API，不应该定义在待渲染的组件内部。

两种选择器写法都可以解决节点匹配问题，同时修正顶层渲染逻辑即可：

1. 如果你坚持使用getElementsByClassName，取集合的第一个元素即可：document.getElementsByClassName("root")[0]
2. 更简便的写法是使用querySelector直接匹配单个类名节点：document.querySelector(".root")

修正后完整代码 #

HTML 部分 #

<body>
    <div class="root"></div>
</body>

JavaScript 部分（适配React 17及更低版本） #

import ReactDOM from "react-dom";

// App组件只负责返回要渲染的UI内容
function App() {
    return <h1>Hello, world!</h1>;
}

// 顶层渲染逻辑写在组件外部
ReactDOM.render(
    <App />,
    // 这里传入单个DOM节点即可
    document.querySelector(".root")
);

export default App;

如果你使用的是React 18及以上版本，ReactDOM.render已被废弃，需要使用新的根API：

import ReactDOM from 'react-dom/client';

function App() {
  return <h1>Hello, world!</h1>;
}

const root = ReactDOM.createRoot(document.querySelector(".root"));
root.render(<App />);

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