我正在制作一个就布局和设计而言相当简单的组件,它具有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并只传递静态类别名称和与这些类别关联的数据。

最佳答案

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

像这样:

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


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

像这样:

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


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

07-24 09:44
查看更多