Javascript 在ReactJS中呈现HtmlLevel

在我的第一个ReactJS项目中，我使用documents.createElement等函数构造了一个DIV对象。。。。在我的ReactJS项目中，我将这个带有道具的对象传递给另一个组件，我们称之为C，在这里我要渲染这个对象。但是，控制台告诉我以下错误：

错误：对象作为找到的React子对象无效：[object HtmlLevel]

我知道对象是按我想要的方式构造的，项目将呈现占位符文本。为什么React不允许我在C的渲染函数中执行以下操作

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

---

React代码在虚拟DOM上工作，虚拟DOM本质上是一个Javascript对象树。您正在尝试创建一个真正的DOM元素并将其插入到渲染函数中。虽然在Javascript中编写标记时似乎使用的是HTML元素，但事实并非如此。javascript中的这些标记转换为React.createElement函数调用，而不是实际的div。html元素的实际创建是抽象的。

问题是您使用document.createElement创建了一个实际的DOM元素。React只处理虚拟DOM元素，您可以使用React.createElement创建该元素

这就是说，我认为有一个更好的方法来实现你正试图使用儿童财产

组件的渲染将如下所示：

return (
  <div>
    {this.props.children}
  </div>
);

在父级的组件中

return (
<C>
  <div>I am going to be inserted in `C`'s children props</div>
</C>
)

---

另外，请注意，您不需要key=uuidv4，因为这将在每次渲染时更改，从而消除key属性的优点。如果您希望处理将vdom传递给组件的问题，则这是React在真实DOM和虚拟DOM之间创建一对一映射并优化其所做更改的一种方法，你可能想考虑使用儿童。