javascript - react : render() and multiple children

Question

我有一个不受我控制的 map 组件，它会渲染它的所有直接子组件:

<map>
  <point />
  <circle />
  <circle />
</map>

现在我正在尝试编写一个返回多个对象的组件:

<myComponent>
  <circle />
  <circle />
</myComponent>

并将其放入我的 map 中:

<map>
  <point />
  <circle />
  <circle />
  <myComponent>
    <circle />
    <circle />
  </myComponent>
</map>

但是由于 map 仅渲染直接子项，我不知道如何让它工作。帮忙？

Answer 1

只需使用特殊的 children prop :

function myComponent(props) {
  return (
    <map>
      {props.children}
    </map>
  );
}

然后像平常一样在另一个组件中使用它:

...
render() {
  return (
    <myComponent>
      <circle />
      <circle />
    </myComponent>
  );
}
...