React应用路由传参优化：复用表单的参数传递方案咨询

核心思路是将表单字段配置的所有权下放到各个业务模块的DataTable组件，通过回调把配置传递给AddNew组件，而非在App.js中集中引入所有配置。

1. 拆分表单配置到对应业务模块 #

把不同类型的表单字段配置分别放在各自的业务目录下，比如：

• src/employee/employeeInputs.js（员工表单字段）
• src/department/departmentInputs.js（部门表单字段）
• src/salary/salaryInputs.js（薪资表单字段）

示例employeeInputs.js内容：

export default [
  { name: 'name', label: '员工姓名', type: 'text' },
  { name: 'id', label: '员工ID', type: 'number' },
  { name: 'position', label: '职位', type: 'text' }
];

2. 给DataTable组件添加回调参数 #

修改通用DataTable组件，新增onOpenAddForm回调props，让组件在点击「Add New」时，把当前业务对应的表单配置传递出去。

以员工表格为例：

// src/employee/EmployeeTable.js
import employeeInputs from './employeeInputs';

function EmployeeTable({ onOpenAddForm }) {
  return (
    <div className="employee-table">
      {/* 表格内容 */}
      <button onClick={() => onOpenAddForm(employeeInputs)}>Add New Employee</button>
    </div>
  );
}

export default EmployeeTable;

3. 简化App.js的逻辑 #

App.js只负责管理表单的显示状态，以及接收各DataTable传递的表单配置，不再需要引入所有类型的表单字段：

// src/App.js
import { useState } from 'react';
import EmployeeTable from './employee/EmployeeTable';
import DepartmentTable from './department/DepartmentTable';
import SalaryTable from './salary/SalaryTable';
import AddNew from './components/AddNew';

function App() {
  const [isAddFormOpen, setIsAddFormOpen] = useState(false);
  const [currentFormInputs, setCurrentFormInputs] = useState([]);

  const handleOpenAddForm = (inputs) => {
    setCurrentFormInputs(inputs);
    setIsAddFormOpen(true);
  };

  return (
    <div className="App">
      <EmployeeTable onOpenAddForm={handleOpenAddForm} />
      <DepartmentTable onOpenAddForm={handleOpenAddForm} />
      <SalaryTable onOpenAddForm={handleOpenAddForm} />
      
      {isAddFormOpen && (
        <AddNew 
          inputs={currentFormInputs} 
          onClose={() => setIsAddFormOpen(false)} 
        />
      )}
    </div>
  );
}

export default App;

4. 保持AddNew组件的通用性 #

AddNew组件只需要根据传入的inputs数组渲染表单，完全不需要关心当前是哪种类型的记录：

// src/components/AddNew.js
function AddNew({ inputs, onClose }) {
  return (
    <div className="add-form-modal">
      <h3>添加新记录</h3>
      <form>
        {inputs.map((input) => (
          <div key={input.name} className="form-group">
            <label htmlFor={input.name}>{input.label}</label>
            <input
              id={input.name}
              type={input.type || 'text'}
              name={input.name}
              placeholder={`请输入${input.label}`}
            />
          </div>
        ))}
      </form>
      <div className="form-actions">
        <button onClick={onClose}>取消</button>
        <button type="submit">保存</button>
      </div>
    </div>
  );
}

export default AddNew;

扩展方案：用路由传递配置（可选） #

如果你的AddNew是单独的路由页面，可以把表单配置序列化为路由参数传递：

// 在DataTable中跳转时传递
import { useNavigate } from 'react-router-dom';

function EmployeeTable() {
  const navigate = useNavigate();
  const handleOpenAdd = () => {
    const inputsStr = JSON.stringify(employeeInputs);
    navigate(`/add-new?inputs=${encodeURIComponent(inputsStr)}`);
  };
}

// 在AddNew页面解析参数
import { useLocation } from 'react-router-dom';

function AddNew() {
  const location = useLocation();
  const inputs = JSON.parse(decodeURIComponent(location.search.split('=')[1]));
  // ...渲染逻辑
}

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