Question

如果我正确理解了React的children道具：

children通常是一个数组，但是如果只有一个孩子，它就会给出这个孩子。（source）
children是“不透明的”，因此应用程序代码显然不应该依赖于此。（source）
React.children.count会返回1。
React.children.only应该是唯一的孩子。

基于此，我希望以下代码能够正常工作：

const Sample = ({children, ...props}) => {
  if (React.Children.count(children) === 1) {
    doSomethingWith(React.Children.only(children));
  }

  // etc.
};

<Sample>Hello, world!<Sample>;

相反，它会抛出以下错误：

onlyChild必须通过一个孩子只有一个孩子

为什么？

Answer 1

问题在于React.Children.only希望唯一的子节点是有效的React 元素，而不是可渲染的字符串或数字。

我真的不明白这个的基本原理或用例，但React 15.3.1至少improves the error message（“React.Children.only预计会收到一个React元素子”）。

React issue #1104进一步讨论了这一点。

解决方案显然是忽略React.Children.only并继续直接访问单个children元素：

  if (React.Children.count(children) === 1) {
    doSomethingWith(children);
  }

单身孩子和“onlyChild必须通过一个孩子只有一个孩子”

1 个答案: