如何在 React 中创建自定义动态表格（带动态表头）
嗨，又见面啦！👋😊
在我上一篇文章的评论区，大家热烈讨论了如何在 React 中创建更动态的动态表格解决方案，所以就有了这篇文章！🚀
在开始之前，我强烈建议您查看我们网站上提供的解决方案的可运行示例：
如何在 React 中创建自定义动态表格（带动态表头）
这篇文章的最终效果：
下面的例子运用了以下概念：
- 表格由列和数据属性描述，
- 表格由表头和一些数据记录组成，
- 该
column数组允许我们决定要在数据行中显示哪些列名。 - 通过使用
map()函数，我们可以减少代码量——列和数据数组被映射到 React 组件中。
请记住，每条记录都应该有一个唯一的键🗝️——这有助于 React 更有效地管理 DOM 中的更改。例如，可以path为表格中的每个元素分配一个这样的键。
实际例子：
import React from 'react';
const tableStyle = {
border: '1px solid black',
borderCollapse: 'collapse',
textAlign: 'center',
width: '100%'
}
const tdStyle = {
border: '1px solid #85C1E9',
background: 'white',
padding: '5px'
};
const thStyle = {
border: '1px solid #3498DB',
background: '#3498DB',
color: 'white',
padding: '5px'
};
const Table = ({ id, columns, data }) => (
<table style={tableStyle}>
<tbody>
<tr>
{columns.map(({ path, name }) => (
<th style={thStyle} key={path}>{name}</th>
))}
</tr>
{data.map((rowData) => (
<tr key={rowData[id]}>
{columns.map(({ path }) => (
<td style={tdStyle} key={path}>
{rowData[path]}
</td>
))}
</tr>
))}
</tbody>
</table>
);
// Example use --------------------
const App = () => {
const columns = [
{ path: "id", name: "ID" },
{ path: "name", name: "Name" },
{ path: "age", name: "Age" },
{ path: "favFruit", name: "Favourite Fruit" },
];
const data = [
{ id: 1, name: 'Kate', age: 25, favFruit: '🍏' },
{ id: 2, name: 'Tom', age: 23, favFruit: '🍌' },
{ id: 3, name: 'Ann', age: 26, favFruit: '🍊' },
{ id: 4, name: 'Jack', age: 21, favFruit: '🍒' }
];
return (
<div>
<Table id="id" columns={columns} data={data} />
</div>
);
};
export default App;
您可以在这里运行此示例。
如果您觉得这个方法有用，可以点赞或留言告诉我您的想法。💬
感谢您的阅读！😊
给我们写信吧！✉
如果您有任何关于 React 或 JavaScript 的问题需要解决，或者有其他人无法解答的问题，又或者您正在寻找指导，请访问dirask.com -> 问题页面联系我们。
文章来源：https://dev.to/diraskreact/how-to-create-customized-dynamic-table-in-react-with-dynamic-header-3mc2