为什么对象作为反应儿童无效？什么是有效的孩子反应，为什么？

Question

React 能够打印任何原始值并使用 JSX 反应元素，但如果它遇到 JSX 中的任何对象，则会抛出错误，因为“对象作为反应子项无效”。

请帮助我理解这一点并找出背后的原因。

Answer 1

• 从技术上讲，您只能将对象用作组件（但不能用于元素）的子对象。
• 当您将对象用作您自己的组件的子组件时，您可以决定如何在渲染中处理此对象<p>{children.someText}</p>，但是当您将对象用于元素<p>{{ someText: 'hey' }}</p> 时，React 不知道如何解析它。
• 因此，React 会抛出错误以通知您您做错了什么。

Answer 2

您在 React 文档中有一个 JSX in Depth 部分。

什么是 React 中的有效子代以及为什么？

因为 JSX 是 React.createElement 的合成糖，所以这个函数定义了 React 元素：

类型参数可以是标签名称字符串（例如'div'或'span'）、React组件类型（类或函数），或 React 片段 类型 ...

React.createElement(type, [props], [...children]);

• 标记名称字符串是 HTML 元素字符串表示形式。
• React 组件是React.createElement 创建的对象
• React fragment 是React.createElement(React.Fragment,...) 创建的特殊类型。

为什么对象作为反应子级无效？

// Objects are not valid as react children
<>
  { a:42 }
</>

因为对象不在React.createElement 的类型定义中。

Answer 3

我在 Twitter 上向 Dan Abramov 发布了同样的问题。这是他对我的询问的回复。

一开始我心里有这个想法，现在从他的回答中很清楚了。问自己以下问题以自己回答。

1. 当您将对象用作子对象时，您期望看到什么？
2. React 或 DOM 应该如何显示对象？他们应该只显示该对象的 [Object object] 还是 JSON 字符串？

嗯，关于如何在 UI 上表示对象真的不清楚。毕竟，我们在页面上看到的大多是一些 html 标签内的字符串内容。所以，react 只是简单地抛出一个错误，而不是主动将对象转换为它的 toString() 或 JSON 表示，然后在 UI 上显示它。

因此，作为开发人员，我们应该从该对象中取出相关的原始信息并在我们的组件中进行渲染。

在 JSX 表达式中使用函数的补充： {() => console.log("我是arror函数")}

React 巧妙地警告我们而不会抛出错误，而且它是不言自明的。