Children

Rax 的核心是组件。你可以像嵌套 html 标签那样嵌套 Rax 组件，因为它类似于标记，使得编写 jsx 变得很容易。因为我们使用的是 javascript，我们可以改变 props.children。我们可以给他们传递特殊的属性，来决定是否渲染他们并且可以按照我们的意愿去操作他们。
Children 提供了用于处理 props.children 不透明数据结构的实用方法。从本质上来讲，props.children 可以是任何的类型，比如数组、函数、对象等等。

方法

Children.map(children, function[(thisArg)])

在 children 里的每个直接子节点上调用一个函数，像数组一样工作，并将 this 设置为 thisArg。如果 children 是一个数组，它将被遍历并为数组中的每个子节点调用该函数。如果子节点为 null 或是 undefined，则此方法将返回 null 或是 undefined，而不会返回数组。
注意：如果 children 是一个 Fragment 对象，它将被视为单一子节点的情况处理，而不会被遍历。

import Children from 'rax-children';

function Hello({ children }) {
  return Children.map(children, (child, i) => {
    if ( i < 1 ) return;
    return child;
  });
}

function App() {
  return <Hello>
    <Text>Hello</Text>
    <Text>Rax</Text>
  </Hello>
}

Children.forEach(children, function[(thisArg)])

与 Children.map() 类似，但它不返回处理后的节点数组，仅遍历节点，多用于处理数据。

function Hello({ children }) {
  Children.forEach(children, (child, i) => {
    if ( i < 1 ) {
      child.props.children = 'Hello' + child.props.children
    };
  });
  return children
}

function App() {
  return <Hello>
    <Text>World</Text>
    <Text>Rax</Text>
  </Hello>
}

Children.count(children)

返回 children 中的元素总数量，等同于通过 map 或 forEach 调用回调函数的次数。

function Hello({ children }) {
  const count = Children.count(children);
  return children
}

function App() {
  return <Hello>
    <Text>World</Text>
    <Text>Rax</Text>
  </Hello>
}

Children.only(children)

验证 children 是否只有一个子节点（一个 React 元素），如果有则返回它，否则此方法会抛出错误。
当然你也可以使用 propTypes 去验证，但这只会在控制台有一个警告。

function Hello({ children }) {
  const only = Children.only(children);
  return only ? children : null;
}

function App() {
  return <Hello>
    <Text>World</Text>
  </Hello>
}

Children.toArray(children)

将 children 这个复杂的数据结构以数组的方式扁平展开并返回，并为每个子节点分配一个 key。当你想要在渲染函数中操作子节点的集合时，它会非常实用，特别是当你想要在向下传递 this.props.children 之前对内容重新排序或获取子集时。

function Hello({ children }) {
  const [state, setState] = useState('Rax');
  return Children.toArray(children).filter(child => child.props.children === state);
}

function App() {
  return <Hello>
    <Text>Rax</Text>
    <Text>World</Text>
  </Hello>
}

参考

JSX