React 渲染组件数组

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

组件列表文件

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;但显然它不允许我对这种类型的对象执行此操作？

我想我的后备方案是返回一个简写函数而不是数组，但出于某种原因我喜欢该数组？对于青少年来说似乎更简单。

您是否考虑过使用新的反应片段 https://reactjs.org/docs/fragments.html？ （在 v16 中）

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

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

如果您确实需要这样做，那么您可以使用React.cloneElement https://reactjs.org/docs/react-api.html#cloneelement克隆元素并注入新属性：

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