如何在通过类名检索的 DOM 节点内呈现 React 组件？答案

【问题标题】：How can I render a React component inside a DOM node retrieved via class name?如何在通过类名检索的 DOM 节点内呈现 React 组件？
【发布时间】：2021-08-10 23:21:09
【问题描述】：

HTML：

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

JavaScript：

import ReactDOM from "react-dom";

function App() {
    return ReactDOM.render(
        <h1>Hello, world!</h1>,
        document.getElementsByClassName("root")
    );
}

export default App;

编译此代码后，我得到以下“错误：目标容器不是 DOM 元素。”

有人知道为什么吗？

【问题讨论】：

标签： reactjs class dom root getelementsbyclassname

【解决方案1】：

您正在获取多个元素而不是一个。 ReactDOM.render 中的第二个参数应该是一个元素，而不是元素列表。
如果您想使用class 而不是id，则使用document.querySelector(".root") 作为第二个参数可能更谨慎。

【讨论】：

【解决方案2】：

document.getElementsByClassName() 返回一个数组而不是一个元素。

你可以这样做 -

document.getElementsByClassName("root")[0]

或者改变做 getElementById("root"); 并将 class="root" 更改为 id="root"。

【讨论】：

【解决方案3】：

getElementsByClassName 方法返回一个类似数组的对象，而不是像 react-dom 要求的 DOM 元素 (DOCS)。

如果您想查询具有类名的单个 DOM 元素，您可以使用 querySelector 方法，该方法返回文档中与指定选择器匹配的第一个元素

document.querySelector(".root")

【讨论】：