reactjs - 需要帮助构建反应表的逻辑
问题描述
我有一个很小的问题,但我是新开发人员并且第一次学习反应,发现很难解决它。
问题:
我有一个名为 Table 的组件,我通过迭代其他项目来呈现另一个名为 TableRow 的组件。在表格行组件中,我正在渲染行。我有这样的数据行:
1: [a]
2: [a,b]
3: [a]
我想要输出这样的东西
1 a
2 a
b
3 a
我能够实现这样的输出
1 a
2 a
2 b
3 a
但发现很难获得准确的输出。在表格行组件中,我只是迭代项目并显示它,我必须包含一个登录名,我可以在其中检查 2 的标题是否已经可用,不要放它,只插入数据部分。如何实现。任何帮助将不胜感激。谢谢你。
data: [
{
header: header
items: [1]
},
{
header: header2,
items: [1,2]
},
{
header: header3,
items: [1,2]
}
]
示例代码:
<Table>
this.props.data.map(obj => {
return <NewComponent header = {obj.header} items = {obj.items} />
})
</Table>
<NewComponent>
this.props.items.map(item=> {
<TableRow>
<th> {this.props.header} </th>
<tb> {item} </tb>
</TableRow>
})
</NewComponent>
电流输出:
1 1
2 1
2 2
3 1
我想
1 1
2 1
2
3 1
任何帮助将不胜感激。
解决方案
如果第一次通过,则有条件地呈现标题值
<Table>
this.props.items.map( (item, idx), =>
<TableRow>
<TableHeader>{idx === 0 ? this.props.header : ''}<TableHeader>
<TableBody>body>item<TableBody>
</TableRow>
)
</Table>
编辑
这是您更新后的示例。
const Table = (props) => {
const { data } = props;
return (
<table>
<tbody>
{data.map((row, idx) => (
<TableRow header={row.header} items={row.items} />
))}
</tbody>
</table>
);
}
}
const TableRow = ({ header, items }) => {
return items.map((item, idx) => (
<tr>
<td>{idx === 0 ? header : " "}</td>
<td>{item}</td>
</tr>
));
};
推荐阅读
- jquery - 将 Jira 问题收集器与 Angular 应用程序集成的方法?
- node.js - 在 Node 10 中混淆安装错误与 ifxnjs
- python - 出于神秘原因,函数为 numpy 数组定义了一个不需要的属性
- mysql - 如何添加多列并显示最大值?
- r - 将单独文件中的试验叠加到一个 ggplot 图上
- sql-server - SQL Server docker容器在初始化后停止
- c++ - 从字符串转换为 uint8,反之亦然
- javascript - 从字符串返回最大的 3 位数块 - JavaScript
- r - 如何使用关于来自两个不同数据帧的两列的 if else 语句创建新列?
- linkedin - 在哪里申请访问 LinkedIn r_fullprofile 的权限?