Question

我正在制作一个相当简单的组件，就布局和设计而言，它有3个类别和与之相关的数据，布局非常像这样：

<div>
  <strong>User Name: </strong>
  {userName}
</div>
<div>
  <strong>User ID: </strong>
  {userID}
</div>
<div>
  <strong>Hobbies: </strong>
  {comma-separated-list}
</div>

目前所有数据都来自不同的部分，因此不属于单个数组或对象，因此我无法使用.map。类别都只是常量字符串值。构建一个可以重新用于在循环中显示数据的小组件的最佳方法是什么。由于它几乎重复了div标记只有不同的数据，我想重用div并只传递与这些类别相关的静态类别名称和数据。

Answer 1

编写一个简单的无状态功能组件，并将所需的数据传递给props。

像这样：

const DisplayCaterogy = ({ categoryName, categoryValue}) => (
    <div>
        <strong>{categoryName}: </strong>
        {categoryValue}
    </div>
)

现在您需要将categoryName和categoryValue传递给component以在dom中呈现数据。

像这样：

<DisplayCaterogy categoryName="User Name" categoryValue={/* name of the user */} />

注意：如果您在单独的文件中定义该组件，请不要忘记导出/导入该组件。

Answer 2

你可以这样：

数据：

data: [
  {
    name: 'Username',
    value: 'Name',
  },
  {
    name: 'Hobbies',
    value: ['one', 'two']
  }
]

组件：

function ListCategory({ data }) {
  return data.map(category =>
    <Category name={category.name} value={category.value} />
  );
}

function Category({ name, value }) {
  return (
    <div>
      <strong>{name}: </strong>
      {Array.isArray(value) ? value.join(', ') : value}
    </div>
  );
}

<ListCategory data={data} />

如何在JSX中循环不属于同一数组的值

2 个答案: