Question

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

组件列表文件

(*[in-mem size]byte)(unsafe.Pointer(&mystruct))

仪表板组件

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

如果我这样做，我就得不到你必须申请一把钥匙＆＃39;错误然而没有渲染？而且我猜它是因为＆＃39;组件＆＃39;在这些方面并不存在或存在奇怪的东西。

我也试过了{components.map((component, key) => ( <component key={key}/> }，但它显然不允许我在这种类型的对象上做到这一点？

我认为我的后备是返回一个速记函数而不是数组但是我喜欢这个数组吗？对于青少年来说似乎更简单。

Answer 1

如果您总是希望渲染组件文件中的所有组件，那么最好将它们包装在React.Fragments标记中。

最佳做法是将其导出为一个简单的函数，它返回组件而不是常量。

所以......

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

      <ComponentOne\>
      <ComponentTwo\>

    <\React.Fragment>
  )
}

export default Components

这允许您将多个组件放在一起，而不包含包含它们的DOM元素。

然后你应该只能通过将它作为普通组件来渲染它，它将渲染所有它们，所以只需导入它然后......

<Components \>

否则，如果你想将它们视为一个数组，你在导入的React对象上有一个免费的函数......

React.Children.toArray(arrayOfComponents)

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

Answer 2

您是否考虑过使用新的React Fragments？（第16节）

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

如果你需要传递密钥，那么我建议只需要组件有密钥。这就是React的工作方式，因此我不建议您在可能无法预测的接口后面隐藏此行为。

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

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

Answer 3

这很简单，只需将您的组件包装到glm(formula = RS_sticky ~ NonRSevents_before1stRS, family = binomial(link = "logit"), data = data) Deviance Residuals: Min 1Q Median 3Q Max -0.7432 -0.7432 -0.7222 -0.3739 2.0361 Coefficients: Estimate Std. Error z value Pr(>|z|) (Intercept) -1.1455 0.4677 -2.449 0.0143 * NonRSevents_before1stRS -0.1322 0.1658 -0.797 0.4255 --- Signif. codes: 0 ‘***’ 0.001 ‘**’ 0.01 ‘*’ 0.05 ‘.’ 0.1 ‘ ’ 1 (Dispersion parameter for binomial family taken to be 1) Null deviance: 34.575 on 33 degrees of freedom Residual deviance: 33.736 on 32 degrees of freedom (1 observation deleted due to missingness) AIC: 37.736 Number of Fisher Scoring iterations: 5*并在div传递，就像我在下面所做的那样：

key

Worked example

Answer 4

跟进我的评论，你应该这样做：

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

使用React 16，您可以使用React.Fragment：

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

Answer 5

实际上，您正在从文件中导出elements数组。一种方法是导出组件数组并将其渲染为

import React from 'react';
export default [
    ComponentOne
    ComponentTwo
];
// Then following will work
{components.map((Component, key) => (
    // Remember to make first letter capital (in this case "c")
    <Component key={key}/>
}

另一种方法是将组件包装在div中，如下所示

import React from 'react';
export default [
    <ComponentOne/>
    <ComponentTwo/>
];
// Then wrap in div
{components.map((component, key) => (
    <div key={key}>
      {component}
    </div>
}

Answer 6

所有这些答案几乎都是正确的。只需从您的出口中删除<../>：

export default [ ComponentOne, ComponentTwo, ]

在另一个文件中，使用.map()：

export default class Dashboard extends React.Component {
    render = () => (
        <div className="tile is-parent">
            {components.map((Component, key) => (<Component key={key} />))}
        </div>
    )
}

还要注意，如果您想像其他人建议的那样使用Fragment，则可以只写<>...</>。

Answer 7

如果您使用的React版本高于16，则可以这样创建组件列表：

import React from 'react';

export const componentList = [ ComponentOne, ComponentTwo ];

并将它们渲染到这样的位置：

import React from 'react';

function SomeComponent() {
  return (
    <div>
      {componentList.map((component, index) => (
        <div key={index}> {component && component.render()}</div>
      ))}
    </div>
  );
}

Answer 8

如果我把组件放在一个数组中，我通常这样做：

const COMPONENTS = [
  <Foo />,
  <Bar />
]

[0, 1].map(item => {
      return (
        <React.Fragment key={item}>
          {COMPONENTS[item]}
        </React.Fragment>
      )
})

React渲染组件数组

8 个答案: