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

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 传递给组件以在 dom 中呈现数据。

像这样:

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

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