React中如何向动态子组件传递数据？（附业务代码场景）

首先看你的代码，核心问题是父组件通过fetchDrivers拿到数据后存在了driversResult状态里，但子组件AssingCell还没拿到这个数据。给你几个可行的实现方案，从最直接的开始：

方案一：直接通过Props传递（最推荐） #

这个方案最适合当前的父子组件关系，只需要把父组件的driversResult作为props传给AssingCell，同时要确保数据更新时子组件能拿到最新值：

1. 先修正一个小问题：你在componentWillReceiveProps里用的i是全局变量，会导致多个组件实例互相干扰，应该把它定义在组件实例上，比如在constructor里加一句：

this.i = 0;

2. 修改createcolumns方法，让它接收driversResult参数，然后把数据传给子组件：

createcolumns(columns, driversResult) {
  const editColumnRender = (text, record, index) => (
    <AssingCell 
      index={index} 
      columnsKey={columns[3].key} 
      onAutoChange={this.onAutoChange}
      driversOptions={driversResult} // 把获取到的司机数据传进去
    />
  );
  columns[3].render = editColumnRender;
  return columns;
}

3. 不要把columns存在state里（因为数据更新时state里的columns不会自动同步），而是在render方法里动态生成，这样每次driversResult变化时，都会生成新的render函数，子组件就能拿到最新数据：

render() {
  const { dataList, loading, driversResult } = this.state;
  // 每次render都基于最新的props和state生成columns
  const columns = this.createcolumns(clone(this.props.tableInfo.columns), driversResult);
  return ( <TableWrapper columns={columns} dataSource={dataList} /> );
}

4. 最后在子组件AssingCell里，就可以通过this.props.driversOptions拿到数据，用来渲染自动完成组件的选项了。

方案二：使用React Context API（适合多层级组件） #

如果后续你的组件层级变深，props传递太繁琐，可以用Context来共享数据：

1. 在父组件所在文件创建一个Context：

const DriversContext = React.createContext([]);

2. 父组件用Provider包裹表格，把driversResult作为value传递：

render() {
  const { dataList, loading, driversResult } = this.state;
  const columns = this.createcolumns(clone(this.props.tableInfo.columns));
  return (
    <DriversContext.Provider value={driversResult}>
      <TableWrapper columns={columns} dataSource={dataList} />
    </DriversContext.Provider>
  );
}

3. 子组件AssingCell里消费这个Context：

// 类组件写法
class AssingCell extends Component {
  static contextType = DriversContext;
  render() {
    const driversOptions = this.context;
    // 用这个数据渲染自动完成组件
    return (/* 你的模态框和自动完成组件代码 */);
  }
}

// 函数组件写法
function AssingCell(props) {
  const driversOptions = React.useContext(DriversContext);
  return (/* ... */);
}

方案三：全局状态管理（比如Redux） #

如果这个司机数据需要在多个不相关的组件里使用，可以把它放到全局状态管理库中，比如Redux。子组件直接从store里获取数据，不需要通过父组件传递。不过如果只是这两个组件用的话，这个方案有点过度设计，还是方案一更合适。

另外提个小建议：类组件里的componentWillReceiveProps已经被标记为过时了，如果你用的是较新的React版本，可以换成getDerivedStateFromProps静态方法，或者直接用函数组件+hooks重构代码，会更简洁。

内容的提问来源于stack exchange，提问作者Ahmet Kuşlular