javascript - react :render()和多个子级

我有一个地图组件超出了我的控制范围，无法显示所有直接子元素：

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

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

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

并将其放入我的地图：

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

但是由于地图仅呈现直系子级，因此我不确定如何使它起作用。帮帮我？

最佳答案

如果我没有记错，我想这就是您要寻找的。

function MyComponent (props) {
  const objs = props.objs;
  const listItems = objs.map((obj) =>
    < {obj} />
  );
  return (
    <map>{listItems} </map>
  );
}

const objs = ['circle', 'circle'];
ReactDOM.render(
  <MyComponent objs={objs} />, //pass children i.e.,objs as props to the MyComponent
  document.getElementById('root')
);

关于javascript - react :render()和多个子级，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/40753234/