React中点击按钮如何渲染组件？表格添加行问题求助

你的问题出在直接在onClick回调里创建JSX元素但没有触发组件重新渲染——React是状态驱动的UI框架，只有当组件状态更新时，才会重新计算并渲染JSX。当前的写法只是生成了<EstimateRow />元素，但没有把它加入到组件的渲染树中。

下面是修复后的完整代码，用useState维护表格行的数量，通过状态更新来动态渲染新行：

import React, { useState } from "react";
import EstimateRow from "./EstimateRow";

const Estimate = () => {
  // 初始化4行，对应你原来的4个EstimateRow
  const [rowCount, setRowCount] = useState(4);

  return (
    <>
      <div className="estimate-column-names">
        <h3>Category</h3>
        <h3>Subcategory</h3>
        <h3>Item Name</h3>
        <h3>Quanitity</h3>
        <h3>Unit of Measure</h3>
        <h3>Unit Cost</h3>
        <h3>Base Cost</h3>
        <h3>Markup %</h3>
        <h3>Profit Amt</h3>
        <h3>Profit Margin</h3>
        <h3>Total Cost</h3>
      </div>
      {/* 根据rowCount循环渲染对应数量的EstimateRow */}
      {Array.from({ length: rowCount }).map((_, index) => (
        <EstimateRow key={index} />
      ))}
      <button 
        className="button"
        onClick={() => setRowCount(prev => prev + 1)}
      >
        Add Row
      </button>
      {/* 补充删除行逻辑，确保至少保留1行 */}
      <button 
        type="button"
        onClick={() => setRowCount(prev => Math.max(prev - 1, 1))}
        disabled={rowCount <= 1}
      >
        Delete Row
      </button>
    </>
  );
};

export default Estimate;

关键修改点： #

• 用useState声明rowCount状态，初始值设为4（对应你原来的4行）。
• 用Array.from({ length: rowCount }).map(...)循环渲染所有行，每个行需要加唯一的key属性（这里用索引简单实现，实际项目如果行有唯一标识会更稳妥）。
• Add Row按钮的onClick改为调用setRowCount，通过更新状态触发组件重新渲染，从而添加新行。
• 给Delete Row按钮补充了逻辑，避免行数变为0的情况。

如果后续需要对每一行的数据进行单独管理（比如收集表单数据），建议用数组存储每行的状态，示例如下：

// 用数组存储每行的初始数据，这里以空对象为例
const [rows, setRows] = useState([{}, {}, {}, {}]);

// 添加行
const addRow = () => setRows([...rows, {}]);

// 删除指定行
const deleteRow = (index) => setRows(rows.filter((_, i) => i !== index));

// 渲染时传递行数据和更新方法到EstimateRow
{rows.map((row, index) => (
  <EstimateRow 
    key={index} 
    rowData={row}
    onUpdate={(newData) => {
      const updatedRows = [...rows];
      updatedRows[index] = newData;
      setRows(updatedRows);
    }}
    onDelete={() => deleteRow(index)}
  />
))}

这样可以更灵活地处理每行的表单数据，适合复杂的表单场景。

内容的提问来源于stack exchange，提问作者dszal