javascript - 在 ReactJS 中渲染 HTMLDivElements

Question

在我的第一个ReactJS项目中，我使用documents.createElement(...)等函数构造了一个DIV对象。在我的 ReactJS 项目中，我将此带有 props 的对象传递给另一个组件(我们称之为 C)，我想在其中渲染该对象。但是，控制台告诉我以下错误:

Error: Objects are not valid as a React child (found: [object HTMLDivElement])...

我知道该对象的结构符合我想要的方式，并且该项目将呈现占位符文本。为什么 React 不允许我在 C 的 render() 函数中执行以下操作？

return (
  <div key={uuidv4()}>
    {this.props.divObject}
  </div>
);

Answer 1

React 代码适用于 virtual DOM ，它本质上是一个 Javascript 对象树。您正在尝试创建一个真实的 DOM 元素并将其插入到渲染函数中。虽然您在编写 <div> 时似乎正在使用 HTML 元素Javascript 中的标签，情况并非如此。这些<div> javascript 中的标签翻译为 React.createElement函数调用，而不是实际的 div。 html 元素的实际创建被抽象掉了。