Question

我有一个不受我控制的地图组件，它会渲染所有直接的孩子：

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

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

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

然后将其放入我的地图中：

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

但由于地图只呈现直接孩子，我不知道如何让它发挥作用。帮助

Answer 1

只需使用特殊children prop：

即可

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

然后像往常一样在另一个组件中使用它：

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

Answer 2

如果我没错，我猜这就是你要找的。

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')
);

Answer 3

反应16个引入的片段所以你可以做

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

React：render（）和多个子节点

3 个答案: