const
Table
= (
) => {
const
[columns, setColumns] =
useState
([
"Column 1"
,
"Column 2"
,
"Column 3"
]);
const
addColumn
= (
) => {
const
newColumn =
`Column
${columns.length +
1
}
`
;
setColumns
([...columns, newColumn]);
return
(
<
button
onClick
=
{addColumn}
>
Add Column
</
button
>
<
table
>
<
thead
>
{columns.map((column, index) => (
<
th
key
=
{index}
>
{column}
</
th
>
</
thead
>
<
tbody
>
{/* 表格内容 */}
</
tbody
>
</
table
>
</
div
>
export
default
Table
;
在这个示例中,点击 “Add Column” 按钮会触发
addColumn
函数,该函数会在
columns
数组的末尾添加一个新的列数据,并更新组件的 state。然后,使用
map
函数遍历
columns
数组,为每个元素创建一个
<th>
元素,从而动态生成表格的列。
注意,这个示例只演示了动态添加表格的列,对于表格内容的动态生成,可以根据具体需求进行处理。