reactjs 反应渲染组件数组

React render array of components

提问by bashleigh

Quick question. Anyone know how to render an array of components? Trying to make it easier for a developer to alter a particular component. (It's like a dashboard).

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

Component list file

组件列表文件

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

Dashboard Component

仪表板组件

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

The issue is I have an array of components that I need to add a key to. However! I can't seem to add a key to the component as well, not sure how to explain it really so here's the code I've tried:

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

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

If I do the above I get no 'you must apply a key' errors however nothing renders? And I'm guessing it's because 'component' doesn't exist or something weird along those lines.

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

I've also tried component.key = key;but it doesn't let me do that on this type of Object apparently?

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

My fallback I suppose is to return a shorthand function instead of an array but I like the array for some reason? Seems simpler for juniors.

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

采纳答案by Simon Boudrias

Have you consider using the new React Fragments? (in v16)

你有没有考虑使用新的React Fragments？（在 v16 中）

This would be the simplest solution as it would by pass the whole array/key issue.

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

If you need to pass key, then I'd suggest to simply require the components to have the keys. This is how React works, so I wouldn't suggest you to hide this behavior behind an interface that might not be predictable.

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

If you really need to do this, then you can use React.cloneElementto clone the element and inject new properties:

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

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

回答by Matt Wills

If you're always going to want to render all the components in your components file then you're probably better off wrapping them in a React.Fragments tag.

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

Best practise is just to export this as a simple function that returns the components rather than as a constant.

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

So...

所以...

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

      <ComponentOne\>
      <ComponentTwo\>

    <\React.Fragment>
  )
}

export default Components

That allows you to put multiple components next to each other without a DOM element containing them.

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

You should then just be able to render that by using it as a normal component and it'll render all of them, so just import it then...

然后，您应该能够通过将其用作普通组件来渲染它，并且它将渲染所有组件，因此只需导入它...

<Components \>

Otherwise, if you want to treat them like an array, you have a function for free on the React object you've imported...

否则，如果你想把它们当作一个数组来对待，你可以在你导入的 React 对象上免费使用一个函数......

React.Children.toArray(arrayOfComponents)

You pass it an array of components (like in your original question) and it allows you to sort and slice it if you need to then you should be able to just drop it in the return of your render function

您将一组组件传递给它（就像在您的原始问题中一样），如果需要，它允许您对其进行排序和切片，那么您应该能够在渲染函数的返回中将其删除

回答by codejockie

Following up with my comment, you should be doing this instead:

按照我的评论，你应该这样做：

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

With React 16, you can use React.Fragment:

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

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

回答by The Reason

It's pretty easy, just wrap your component into divand pass keythere as i did below:

这很简单，只需将您的组件包裹起来div并传递到key那里，就像我在下面所做的那样：

const Example = ({components}) => (
  <div>
    {components.map((component, i) => <div key={i}>{component}</div>)}    
  </div>
)

Worked example

Worked example

回答by Dustin

All of these answers are almost right. Just remove the <../>from your exports:

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

export default [ ComponentOne, ComponentTwo, ]

export default [ ComponentOne, ComponentTwo, ]

And in the other file use .map():

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

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

Also note that if you wanted to use Fragmentlike others suggested you can just write <>...</>instead.

另请注意，如果您想像Fragment其他人建议的那样使用，则可以<>...</>改为编写。

回答by Prakash Sharma

Actually you are exporting array of elementsfrom the file. One way is to export array of component and render them like

实际上，您正在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}/>
}

The other way is to wrap the component in divlike this

另一种方法是div像这样包装组件

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