反应表中的单元格

Question

我需要在react中创建一个简单的表，它有三列WO、PID和VS，在这三列下，我必须为每个单元格提供数据。已经发布了代码，以及输出应该如何查看。我是新手，请帮我解决

class ActiveWo extends Component {
constructor(props) {
super(props);
this.state = {
tableData:[],

};
}
render(){
const{
tableData
}= this.state;
const data1 = {
"header":[
"WO",   
"PID",
"VS",
],


"accessorr":[
"WO",   
"PID",
"VS",
],
"headertext":[
"VH"

],
"data":[
"10",
"20",
"2"
]
}
const columns = [
{
Header:  data1 && data1.header && data1.header[0],
accessor: data1 && data1.accessorr && data1.accessorr[0],
Cell:(row)=>{
return (
<div>


{data1 && data1.header && data1.data[0]}

</div>
)   
}
},
{
Header: data1 && data1.header && data1.header[1],
accessor: data1 && data1.accessorr && data1.accessorr[1],
Cell:(row)=>{
return (
<div>

{data1 && data1.header && data1.data[1]}

</div>
)   
}
},
{
Header: data1 && data1.header && data1.header[2],
accessor: data1 && data1.accessorr && data1.accessorr[2],
Cell:(row)=>{
return (
<div>

{data1 && data1.header && data1.data[2]}

</div>
)   
}
}
]
const columns1 = [
{
Header:  data1 && data1.header && data1.headertext[1],
accessor: data1 && data1.accessorr && data1.accessorr[1],
},
{
Header: data1 && data1.header && data1.header[2],
accessor: data1 && data1.accessorr && data1.accessorr[1],
}
]
return ( 
<div className={styles.mainContainer}>
<TableContainer
columns={columns}
tableData={tableData}
/>
</div>       
);
}
}
export default ActiveWo;

输出应该看起来像：

WO-PID与

10 20 2

30 30 3

40 40 4

50 50 5

60 60 6

谢谢

Answer 1

在TableContainer组件中，您可以循环列道具来打印标题，循环tableData支柱来打印行。

Answer 2

没错，您应该循环遍历从"ActiveWo"；至"；TableContainer"；。以下是解决您问题的方法之一。

ActiveWo组件：

const headers = ['WO', 'PID', 'VS'];
const rows = [
{ id: 1, row: ['10', '33', '2'] },
{ id: 2, row: ['22', '11', '8'] },
{ id: 3, row: ['10', '33', '90'] },
{ id: 4, row: ['11', '22', '1'] },
{ id: 5, row: ['33', '33', '2'] },
{ id: 6, row: ['10', '23', '90'] },
];

function ActiveWo() {
return (
<>
<TableContainer headers={headers} rows={rows}/>
</>
);
}
export default ActiveWo;

TableContainer组件：

function TableContainer({ headers, rows }) {
return (
<div className={styles.grid}>
<div className={styles.content}>
{headers && headers.map((header, key) => (
<span key={key}>
{header}
</span>
))}
</div>
{rows.map(item => (
<div key={item.id} className={styles.content}>
{item.row.map(el => (
<span key={el.id}>
{el}</span>
))}
</div>
))}
</div>
);
}
TableContainer.propTypes = {
data: PropTypes.array,
};

export default TableContainer;

TableContainer的样式：

.grid {
display: grid;
width: 200px;
}
.content {
display: flex;
justify-content: space-between;
}