Javascript 反应：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')
);

功能MyComponent（道具）{
const objs=props.objs；
常量listItems=objs.map（（obj）=>
<{obj}/>
);
返回(
{listItems}
);
}
常量objs=['circle'，'circle']；
ReactDOM.render(
，//将子对象（即OBJ）作为道具传递给MyComponent
document.getElementById（'root'））
);

只需使用特殊的：

功能myComponent（道具）{
返回(
{props.children}
);
}

然后在另一个组件中使用它，就像您通常所做的那样：

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

。。。
render（）{
返回(
);
}
...

React 16引入的片段 所以你可以

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

。。。
render（）{
返回(
);
}
...

您可能需要详细说明您的问题。。。你尝试了什么，发生了什么。。。地图组件来自哪里？map组件的子组件是作为API公开的吗？你说的“返回的组件”是什么意思……你能更详细地解释一下吗？简单的例子——我只是想把2个

从我的组件提升到map请分享你的codelol，是的。不知道我为什么要强迫它成为react组件，谢谢！这只适用于只有一个

myComponent

实例的情况，对吗？不，这不应该成为限制因素。你到底是什么意思？哦，我明白了，对不起。我刚刚编辑了原始问题，应该澄清了，我希望它没有澄清。请编辑问题以包含一些代码示例。

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