ReactJS根据用户选择动态渲染组件的技术问询

嘿，刚接触React一周就尝试动态渲染组件已经超棒啦！我来帮你搞定这个问题～

首先得说下你之前写法的问题：直接把组件类塞进<option>里是不行的，React会把组件类转换成字符串（比如[object Object]），下拉框根本识别不出这是个组件，而且<select>的选项值只能是文本类型，没法直接关联组件本身。

下面是具体的解决步骤，代码都是新手友好型的：

1. 重构组件配置数组 #

把单纯的组件类改成包含显示名称、对应props键、onChange函数的对象数组，这样方便后续和下拉选项关联：

// 可以放在Filter组件内部或者外部
const dateOptions = [
  {
    name: '创建日期',
    component: CreatedDate,
    fromKey: 'createdDateFrom', // 对应filter里的from字段
    toKey: 'createdDateTo',     // 对应filter里的to字段
    onChange: this.handleCreatedDateChange
  },
  {
    name: '客户签署日期',
    component: ClientSignedDate,
    fromKey: 'clientSignedDateFrom',
    toKey: 'clientSignedDateTo',
    onChange: this.handleClientSignedDateChange
  },
  {
    name: '审核日期',
    component: VerificationDate,
    fromKey: 'verificationDateFrom',
    toKey: 'verificationDateTo',
    onChange: this.handleVerificationDateChange
  },
];

2. 给父组件加状态管理选中项 #

在Filter组件的state里保存当前选中的日期组件配置，初始值可以设为第一个选项：

class Filter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedOption: dateOptions[0] // 默认选中第一个组件
    };
    // 记得绑定你的onChange函数（如果还没绑定的话）
    this.handleCreatedDateChange = this.handleCreatedDateChange.bind(this);
    this.handleClientSignedDateChange = this.handleClientSignedDateChange.bind(this);
    this.handleVerificationDateChange = this.handleVerificationDateChange.bind(this);
  }

  // ...其他代码
}

3. 渲染下拉选择器 #

用map遍历配置数组生成<option>，选择时更新state里的选中项：

<select 
  value={this.state.selectedOption.name}
  onChange={(e) => {
    // 根据选中的文本找到对应的配置对象
    const newSelected = dateOptions.find(opt => opt.name === e.target.value);
    this.setState({ selectedOption: newSelected });
  }}
>
  {dateOptions.map(opt => (
    <option key={opt.name} value={opt.name}>
      {opt.name}
    </option>
  ))}
</select>

4. 动态渲染选中的组件 #

从state里取出选中的组件类（注意变量名要大写开头，React要求自定义组件名称必须大写），然后传递对应的props：

render() {
  const { selectedOption } = this.state;
  // 取出要渲染的组件类，变量名大写开头
  const DateComponent = selectedOption.component;

  return (
    <div>
      {/* 上面的下拉选择器 */}
      <select>...</select>

      {/* 动态渲染选中的日期组件 */}
      <DateComponent
        from={this.props.filter[selectedOption.fromKey]}
        to={this.props.filter[selectedOption.toKey]}
        onChange={selectedOption.onChange}
      />
    </div>
  );
}

额外小优化（可选） #

如果你的三个handleXXXChange逻辑类似，可以写一个通用的处理函数，减少重复代码：

// 通用的日期变更处理函数
handleDateChange = (field, from, to) => {
  // 这里根据字段名更新对应的filter
  this.props.updateFilter({
    [`${field}From`]: from,
    [`${field}To`]: to
  });
}

// 配置数组里的onChange可以改成
{
  name: '创建日期',
  component: CreatedDate,
  field: 'createdDate',
  onChange: (from, to) => this.handleDateChange('createdDate', from, to)
}

这样就能根据用户的选择动态渲染对应的日期组件啦，完全适配你之前的单个组件逻辑～

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