我正在制作一个就布局和设计而言相当简单的组件,它具有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 */} />
注意:如果在单独的文件中定义组件,请不要忘记导出/导入组件。