如何在通过 class 名称检索到的 DOM 节点内呈现 React 组件？

Question

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 元素。”

有人知道为什么吗？

Answer 1

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

Answer 2

document.getElementsByClassName() 在 return 中给出一个数组而不是一个元素。

你可以这样做 -

document.getElementsByClassName("root")[0]

或更改 getElementById("root"); 并将 class="root" 更改为 id="root".

Answer 3

方法 getElementsByClassName returns 一个类似数组的对象而不是像 react-dom 这样的 DOM 元素需要 (DOCS).

如果您想查询名称为 class 的单个 DOM 元素，您可以使用 querySelector 方法，该方法 returns 文档中的第一个元素匹配指定的选择器

document.querySelector(".root")

如何在通过 class 名称检索到的 DOM 节点内呈现 React 组件？

How can I render a React component inside a DOM node retrieved via class name?

dom

class

root

getelementsbyclassname

reactjs