javascript - 在 React 中的渲染中传播一组组件

Question

我当前将一个组件数组渲染为另一个组件的子组件，如下所示:

const myComponents = [
  <div key='1'>Component 1</div>,
  <div key='2'>Component 2</div>,
  <div key='3'>Component 3</div>,
];

render() {
  return (
    <AnotherComponent>
      {myComponents}
      <div>Another element</div>
    </ AnotherComponent>
  )
}

我的问题是，在 AnotherComponent 中，我的组件数组呈现为数组(这是有道理的):

// Inside AnotherComponent
console.log(this.props.children) // [[ {}, {}, {} ], {} ]

我的预期输出是组件应该“传播”，如下所示:

// Inside AnotherComponent
console.log(this.props.children) // [ {}, {}, {}, {} ]

我尝试在渲染中映射组件，但输出是相同的:

const myComponents = [
  ...
];

render() {
  return (
    <AnotherComponent>
      {myComponents.map(component => component)}
      <div>Another element</div>
    </ AnotherComponent>
  )
}

我可以通过展平 AnotherComponent 中的子数组来实现这一点。但我想知道是否有一种语法可以让我之前将其展平，以便 AnotherComponent 更干净。

我想实现这一点的原因是因为我在 AnotherComponent 内进行了一些复杂的布局渲染。这要求子级不能是数组，除非我明确想要它，但这里不是这种情况。

编辑:这是一个包含我当前输出和预期输出的演示:

const components = [
  <div>Component 1</div>,
  <div>Component 2</div>,
  <div>Component 3</div>,
];

const MyLayoutComponent = ({ children }) => {
  console.log('❌ Current output', children);
  console.log('✅ Expected output', children.flat());
  return <div>{children}</div>
}

const App = () => (
  <MyLayoutComponent>
    {components}
    <div>Some other component</div>
  </MyLayoutComponent>
);

ReactDOM.render(<App />, document.body)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.0.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.0.0/umd/react-dom.production.min.js"></script>

Answer 1

事实上，它们以数组的形式出现是合适的，而且很有用，因为如果列表的顺序根据 key 属性发生变化，React 可以优化重新渲染。事实上它们位于一个数组中，这使得 React 寻找一个键。

如果您不希望它们本身成为列表，您可以使用片段代替:

const myComponents = <>
  <div>Component 1</div>
  <div>Component 2</div>
  <div>Component 3</div>
</>;

这仍然会作为 props.children 中的单个条目出现，但该条目将是一个片段，而不是一个数组，并且 React 不需要其上的键等。

我能想到的唯一其他答案是将其他组件也放入一个数组中(但这需要它们有一个key):

const App = () => (
  <MyLayoutComponent>
    {[...components, <div key="other">Some other component</div>]}
  </MyLayoutComponent>
);

const components = [
  <div>Component 1</div>,
  <div>Component 2</div>,
  <div>Component 3</div>,
];

const MyLayoutComponent = ({ children }) => {
  console.log('✅ Current child count', children.length);
  console.log('✅ Expected child count', children.flat().length);
  return <div>{children}</div>
}

const App = () => (
  <MyLayoutComponent>
    {[...components, <div key="other">Some other component</div>]}
  </MyLayoutComponent>
);

ReactDOM.render(<App />, document.getElementById("root"));

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.0.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.0.0/umd/react-dom.production.min.js"></script>

或者在这种情况下放弃 JSX 并直接编写 createElement 调用:

const App = () => React.createElement(
  MyLayoutComponent,
  {
    children: [
      ...components,
      <div>Some other component</div>
    ]
  }
);

const components = [
  <div>Component 1</div>,
  <div>Component 2</div>,
  <div>Component 3</div>,
];

const MyLayoutComponent = ({ children }) => {
  console.log('✅ Current child count', children.length);
  console.log('✅ Expected child count', children.flat().length);
  return <div>{children}</div>
}

const App = () => React.createElement(
  MyLayoutComponent,
  {
    children: [
      ...components,
      <div>Some other component</div>
    ]
  }
);

ReactDOM.render(<App />, document.getElementById("root"));

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.0.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.0.0/umd/react-dom.production.min.js"></script>

我想不出 JSX 方法可以做到这一点。