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

问题描述

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

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

解决方法

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

React 中的有效子级是什么？为什么？

由于 JSX 是 React.createElement 的合成糖，因此该函数定义了 React 元素：

type 参数 可以是 标签名称字符串（例如 '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 的类型定义中。

,

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

,

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

最初我有这个想法，现在从他的回复中很清楚。问自己以下问题，自己回答。

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

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

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

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

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