如何基于不同大小的数组为 React 组件动态创建内容

Question

我目前正在为我的一个朋友制作一个网站来计算视频游戏的一些值，我正在尝试制作一个显示，显示我从数据库中提取的每个国家/地区的一些修饰符。 所有修改器都按顺序从数据库中的二维数组存储，并且每组修改器在该二维数组中的自己的数组中分开。 我试图用 Ant Design 的Popover组件显示它，我需要将信息放在<div>或其他 React 组件中，我想用<p>或<Paragraph>标记分隔每个部分格式化。 我遇到的问题是我提取的修饰符数组的长度各不相同，因此我必须让 HTML 或 React 代码动态生成我需要的格式，但我不确定如何执行此操作。 该数组以修饰符 [String] 的名称组织，然后在下一个索引中是修饰符 [Numerical] 的值。 下面我列出了我的组件代码、数组为修饰符格式化的方式，以及我首选的显示方式。 任何帮助都会很棒！

组件代码：

<Popover placement="right" title={"First Idea"} content={[THIS IS WHERE THE HTML/REACT GOES]}>
     <Button> First Idea </Button>
</Popover>

数组示例：

ideaSet = ["legitimacy", 1, "possible_policy", 1]

首选组织：

<div style={{...}}>
<p>
{[Name of Modifier] + ": " + [Modifier Value]}
</p>
...Do the above for however many modifiers there are (not sure how with ReactJS).
</div>

Answer 1

在数组上使用.map并返回<p> 。

return this.props.ideaSet.map((idea) => <p>{your implementation}</p>)