在嵌套数组上反应映射
我正在从 firebase 获取一系列行,每一行看起来像下面的那一行。
row = [
{
index: 1,
body: 'description'
options: ['option1', 'option2', 'option3']
}
]
我目前正在将这些行渲染到 React 中的表中,如下所示:
{this.state.rows.map((row) => (
<TableRow key={row.visit}>
<TableCell align="left">{row.index}</TableCell>
<TableCell align="left">{row.body}</TableCell>
<TableCell align="left">{row.options}</TableCell>
</TableRow>))}
但是,我正在尝试将选项置于下拉列表或类似选项中,以便看起来更整洁且不占用太多垂直空间。有没有办法映射嵌套数组并将其输出到下拉列表中?
回答
您还可以映射嵌套数据。我建议使用一个select元素。
{this.state.rows.map((row) => (
<TableRow key={row.visit}>
<TableCell align="left">{row.index}</TableCell>
<TableCell align="left">{row.body}</TableCell>
<TableCell align="left">
<select>
{row.options.map((option, i) => (
<option key={i} value={option}>{option}</option>
))}
</select>
</TableCell>
</TableRow>
))}