添加链接
link管理
链接快照平台
  • 输入网页链接,自动生成快照
  • 标签化管理网页链接
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> 元素,从而动态生成表格的列。

注意,这个示例只演示了动态添加表格的列,对于表格内容的动态生成,可以根据具体需求进行处理。