React.js 子组件向父组件传ApexCharts点击参数的实现及报错解决

• 父组件渲染<SummaryChart>时，写的() => this.getSequenceView(config, event)里的config、event在父组件当前作用域根本不存在。这两个值是子组件内部用户点击柱条时才会生成的事件参数，父组件渲染阶段没有权限、也没有上下文能拿到这两个值，直接引用就会触发未定义报错。
• 传参链路逻辑颠倒：不需要在父组件传prop的时候预先绑定还不存在的参数，正确的链路是父组件把自身方法直接传给子组件，子组件在触发点击事件时，把拿到的事件参数按顺序传给这个方法即可。
• 子组件的事件回调存在this指向问题：constructor内给ApexCharts事件写普通function时，会因为作用域问题拿不到正确的props对象，同时要注意dataPointSelection事件的固定入参顺序是event、chartContext、config，传参时不要搞反顺序。

父组件调整 #

去掉无意义的箭头函数包裹，直接把接收参数的方法作为prop传给子组件：

class Job extends Component {
  constructor(props) {
    super(props);
    this.state = {}
    this.getSequenceView = this.getSequenceView.bind(this);
  }

  // 形参顺序和子组件回传的顺序保持一致即可
  getSequenceView(config, event) {
    console.log(config.someData);
    $('#help-modal').modal();
  }

  render() {
    return (
      <SummaryChart
        // 直接传方法引用，不要在这里引用不存在的config、event变量
        handleBarClick={this.getSequenceView}
      />
    );
  }
}

子组件调整 #

解决事件回调的作用域问题，按照父组件需要的参数顺序回传点击数据：

class SummaryChart extends Component {
  constructor(props) {
    super(props);
    // 提前解构拿到父组件传进来的方法，避免作用域丢失
    const { handleBarClick } = props;
    this.state = {
      options: {
        chart: {
          events: {
            // 用箭头函数写回调，自动绑定外层作用域
            dataPointSelection: (event, chartContext, config) => {
              // 按父组件方法的形参顺序传值：第一个传柱条信息config，第二个传event对象
              handleBarClick(config, event);
            }
          }
        }
      }
    }
  }

  render() {
    return (
      // 原有图表渲染逻辑保持不变
    );
  }
}

调整后的传参逻辑完全符合事件触发的顺序：

1. 用户点击柱状图柱条
2. 触发ApexCharts内置的dataPointSelection事件，生成全量的点击上下文参数
3. 子组件从事件参数中提取对应的柱条信息、事件对象
4. 调用父组件传入的handleBarClick方法，把参数原样回传给父组件
5. 父组件执行对应的日志打印、模态框打开逻辑
   全程不存在跨作用域引用不存在变量的问题，也能完整拿到子组件回传的柱条全量信息。

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