一个React组件可以按2类渲染吗？

Question

一个React组件可以按2个类渲染吗？就像我在图片中一样。

<< img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pLnN0YWNrLmltZ3VyLmNvbS9TQmh1OC5wbmcifQ==” alt =“在此处输入图像描述”>

我尝试了上面的方法。它给了我另一个错误Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of "Groups".

<< img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pLnN0YWNrLmltZ3VyLmNvbS84Q2NURy5wbmcifQ==” alt =“在此处输入图像描述”>“ >>

这样的按钮组件Im在Groups方法（Groups.jsx）中使用。

const Groups = (props) => (
  <div className = 'panel'>
    <h2>Groups</h2>


    <button >Get Groups</button>


    <div className = 'group-list'>
      {props.groups.map((group) =>
        <GroupsEntry name = {group.name}
          members = {group.members}/>
      )}
    </div>
  </div>
);


你们对此有任何想法吗？谢谢

一个React组件可以按2个类渲染吗？就像我在图片中一样。我尝试了上面。它给了我另一个错误警告：数组或迭代器中的每个子代都应具有唯一的“键”属性。 ...

Answer 1

我会尝试澄清一下。

Answer 2

是的，一个组件可以渲染任意多次。问题是您要在数组上映射并返回一个元素。 React要求您在这些元素之间放置一个唯一的key道具，这些元素最好在渲染之间是一致的。