React组件传参方法及CRUD表单复用路由问题咨询

1. React组件之间传递参数的常见方式 #

• Props传递：最基础的组件通信方式，父组件直接将数据作为props传递给子组件，示例：

  // 父组件
  <ChildComponent userInfo={user} />
  
  // 子组件
  class ChildComponent extends React.Component {
    render() {
      return <div>{this.props.userInfo.name}</div>;
    }
  }
  

• 路由参数传递：像你代码中使用的方式，通过history.push携带动态参数，目标组件通过this.props.match.params获取：

  // 跳转时
  this.props.history.push(`/admin/form_promo/${promoId}`);
  
  // 目标组件获取参数
  const { promoId } = this.props.match.params;
  

• Context API：适合跨多层级组件传递数据，避免props逐层传递的繁琐，通过创建Context并在组件中消费。
• 状态管理工具：如Redux、MobX，将需要共享的数据存储在全局状态中，任意组件都可以获取和修改。
• URL查询参数：通过history.push('/form_promo?id=123')传递，目标组件可借助第三方库（如query-string）解析：

  import queryString from 'query-string';
  const params = queryString.parse(this.props.location.search);
  const promoId = params.id;
  

2. 复用表单实现新增/编辑功能及路由动态名称问题 #

针对你的场景，我会分步骤给出解决方案：

步骤1：修正路由配置 #

你的index.js路由配置是正确的，保留即可：

<Route path="/admin/form_promo" component={UpdateSinglePromo}/>
<Route path="/admin/form_promo/:promoId" component={UpdateSinglePromo}/>

修正dashRoutes.js中的动态参数格式（需用:param而非{param}），并调整路由项：

let dashRoutes = [
  { 
    path: `/form_promo`, 
    name: "Add Promo", 
    icon: "ui-1_simple-add", 
    component: UpdateSinglePromo, 
    layout: "/admin" 
  }
];
export default dashRoutes;

这里只保留新增的路由项，编辑操作通过列表跳转触发，避免侧边栏出现重复菜单。

步骤2：在表单组件中区分新增/编辑模式 #

在UpdateSinglePromo组件中，通过路由参数判断当前模式，分别处理数据逻辑：

class UpdateSinglePromo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      formData: {
        promoId: '',
        prizeId: '',
        ijCod: '',
        title: '',
        description: ''
      }
    };
  }

  componentDidMount() {
    const { promoId } = this.props.match.params;
    if (promoId) {
      // 编辑模式：根据promoId请求数据填充表单
      this.fetchPromoDetail(promoId);
    }
    // 新增模式：保持表单初始空状态
  }

  fetchPromoDetail = async (promoId) => {
    // 替换成你的实际接口请求逻辑
    const response = await fetch(`/api/promos/${promoId}`);
    const data = await response.json();
    this.setState({ formData: data });
  };

  handleSubmit = (e) => {
    e.preventDefault();
    const { promoId } = this.props.match.params;
    if (promoId) {
      // 执行更新操作
      this.updatePromo(promoId, this.state.formData);
    } else {
      // 执行新增操作
      this.createPromo(this.state.formData);
    }
  };

  handleInputChange = (field, value) => {
    this.setState(prev => ({
      formData: { ...prev.formData, [field]: value }
    }));
  };

  render() {
    const { promoId } = this.props.match.params;
    const { formData } = this.state;
    return (
      <form onSubmit={this.handleSubmit}>
        <h2>{promoId ? 'Edit Promo' : 'Add Promo'}</h2>
        {/* 表单输入项示例 */}
        <input 
          type="text" 
          value={formData.title} 
          onChange={(e) => this.handleInputChange('title', e.target.value)}
          placeholder="Title"
          required
        />
        <input 
          type="text" 
          value={formData.description} 
          onChange={(e) => this.handleInputChange('description', e.target.value)}
          placeholder="Description"
          required
        />
        {/* 其他表单字段... */}
        <button type="submit" className="btn btn-primary">
          {promoId ? 'Update Promo' : 'Create Promo'}
        </button>
      </form>
    );
  }
}

步骤3：实现侧边栏菜单的动态名称 #

静态路由配置无法直接实现动态名称，需要在渲染侧边栏时根据当前路由参数判断：

// Sidebar.jsx
import dashRoutes from './dashRoutes';
import { matchPath } from 'react-router-dom';

class Sidebar extends React.Component {
  getDynamicMenuName = (route) => {
    const { pathname } = this.props.location;
    // 检查当前路径是否匹配编辑路由
    const isEditPage = matchPath(pathname, { 
      path: `${route.layout}/form_promo/:promoId`,
      exact: true
    });
    return isEditPage ? "Edit Promo" : route.name;
  };

  renderMenuItems = () => {
    return dashRoutes.map((route, index) => {
      const menuName = this.getDynamicMenuName(route);
      return (
        <li key={index}>
          <Link to={`${route.layout}${route.path}`}>
            <i className={`nc-icon ${route.icon}`} />
            <p>{menuName}</p>
          </Link>
        </li>
      );
    });
  };

  render() {
    return (
      <div className="sidebar">
        {this.renderMenuItems()}
      </div>
    );
  }
}

这样，当用户处于编辑页面时，侧边栏对应菜单会显示"Edit Promo"，回到新增页面时自动切换回"Add Promo"。

步骤4：优化列表页的编辑跳转逻辑 #

你的PromoCatalogList中，updatePromoClicked无需传递多个参数，仅传promoId即可，其他数据由表单组件通过接口获取，更符合组件解耦原则：

// PromoCatalogList.jsx
updatePromoClicked(promoId) {
  console.log('update ' + promoId);
  this.props.history.push(`/admin/form_promo/${promoId}`);
}

// 渲染按钮时仅传递promoId
<MDBBtn 
  type="button" 
  className="btn btn-outline-success waves-effect" 
  onClick={() => this.updatePromoClicked(item.promoId)}
>
  Update
</MDBBtn>

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