React 渲染组件数组

Question

快速提问。有人知道如何渲染组件数组吗？试图让开发人员更容易更改特定组件。 （它就像一个仪表板）。

组件列表文件

import React from 'react';
export default [
    <ComponentOne/>
    <ComponentTwo/>
];

仪表板组件

import React from 'react';

import components from './../../components';

export default class Dashboard extends React.Component
{
    render = () => {
        //Want to render the array of components here.
        return (
            <div className="tile is-parent">
                {components}
            </div>
        );
    };
}

问题是我有一系列组件需要添加密钥。然而！我似乎也无法为组件添加密钥，不确定如何真正解释它，所以这是我尝试过的代码：

 {components.map((component, key) => (
    <component key={key}/>
}

如果我执行上述操作，则不会出现“您必须应用密钥”错误，但是什么都没有呈现？我猜这是因为“组件”不存在或者沿着这些线有些奇怪。

我也试过 component.key = key; 但它显然不允许我在这种类型的对象上这样做？

我想我的后备是返回一个速记函数而不是一个数组，但出于某种原因我喜欢这个数组？对小学生来说似乎更简单。

原文由 bashleigh 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

你考虑过使用新的 React Fragments 吗？ （在 v16 中）

这将是最简单的解决方案，因为它会绕过整个数组/键问题。

如果您需要传递密钥，那么我建议您只要求组件具有密钥。这就是 React 的工作原理，所以我不建议您将这种行为隐藏在可能无法预测的界面后面。

如果您确实需要这样做，那么您可以使用 React.cloneElement 克隆元素并注入新属性：

 React.cloneElement(element, { key: 'foo' });

原文由 Simon Boudrias 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

如果你总是想要渲染组件文件中的所有组件，那么最好将它们包装在 React.Fragments 标签中。

最佳实践只是将其导出为一个返回组件的简单函数，而不是作为常量。

所以…

 const Components = props => {
  return (
    <React.Fragment>

      <ComponentOne/>
      <ComponentTwo/>

    </React.Fragment>
  )
}

export default Components

这允许您将多个组件并排放置，而无需包含它们的 DOM 元素。

然后你应该能够通过将它用作普通组件来渲染它并且它会渲染所有它们，所以只需导入它……

 <Components />

否则，如果你想像对待数组一样对待它们，你可以在你导入的 React 对象上免费获得一个函数……

 React.Children.toArray(arrayOfComponents)

你传递给它一个组件数组（就像你原来的问题），它允许你在需要时对其进行排序和切片，然后你应该能够将它放在你的渲染函数的返回中

原文由 Matt Wills 发布，翻译遵循 CC BY-SA 4.0 许可协议