基于React-Redux：如何从容器向展示组件声明事件处理函数以访问其他Props？

嘿，我来帮你搞定这个问题——你想让从容器组件传给展示组件的事件处理函数能访问其他props对吧？先看看你现有代码里的小问题，再给你几个靠谱的解决方案。

首先说下你当前代码里的问题：你在componentDidMount里用this.props.handle_onload.call(this)来绑定上下文，其实完全没必要，而且如果handle_click是普通函数定义的，它的this指向可能不符合预期，同时你也没法直接在这些处理函数里访问foo这类props。

下面是两种正确的实现方式：

方式一：在mapDispatchToProps中利用ownProps访问其他props #

connect的mapDispatchToProps函数可以接收第二个参数ownProps，它包含了组件本身的所有props（包括mapStateToProps映射过来的foo）。我们可以用箭头函数定义处理函数，自动绑定上下文的同时直接访问这些props：

class ApplicationWidget extends Component {
  componentDidMount() {
    // 直接调用即可，不用再手动绑定this
    this.props.handle_onload();
  }

  render() {
    // 直接传递处理函数，箭头函数已经帮我们绑定好上下文
    return (
      <div onClick={this.props.handle_click}>
        <Header />
        <Content />
      </div>
    );
  }
}

export default connect(
  state => ({ foo: state.foo }),
  // 接收dispatch和ownProps两个参数
  (dispatch, ownProps) => ({
    handle_click: () => {
      // 这里可以直接访问ownProps里的foo
      console.log('点击事件触发，foo的值是:', ownProps.foo);
      // 同时也能dispatch对应的action
      dispatch({ type: 'HANDLE_CLICK', payload: ownProps.foo });
    },
    handle_onload: () => {
      console.log('组件挂载完成，foo的值是:', ownProps.foo);
      dispatch({ type: 'HANDLE_ONLOAD', payload: ownProps.foo });
    }
  })
)(ApplicationWidget);

这种方式的好处是所有和redux相关的逻辑都集中在connect里，展示组件只负责接收props和渲染，保持简洁。

方式二：在展示组件中定义实例方法（适合依赖组件实例的场景） #

如果你的事件处理函数需要访问组件实例的state、refs等内容，那可以在展示组件里用类字段箭头函数来定义处理函数，它会自动把this绑定到组件实例，这样就能直接访问this.props里的所有属性了：

class ApplicationWidget extends Component {
  componentDidMount() {
    this.handle_onload();
  }

  // 类字段箭头函数自动绑定this到组件实例
  handle_onload = () => {
    // 直接通过this.props访问foo和dispatch方法
    console.log('组件挂载，foo的值是:', this.props.foo);
    this.props.handleOnloadDispatch(this.props.foo);
  }

  handle_click = () => {
    console.log('点击触发，foo的值是:', this.props.foo);
    this.props.handleClickDispatch(this.props.foo);
  }

  render() {
    return (
      <div onClick={this.handle_click}>
        <Header />
        <Content />
      </div>
    );
  }
}

export default connect(
  state => ({ foo: state.foo }),
  dispatch => ({
    // 把dispatch逻辑封装成单独的方法传给组件
    handleOnloadDispatch: (foo) => dispatch({ type: 'HANDLE_ONLOAD', payload: foo }),
    handleClickDispatch: (foo) => dispatch({ type: 'HANDLE_CLICK', payload: foo })
  })
)(ApplicationWidget);

这种方式更灵活，适合处理需要组件实例参与的逻辑，同时也能轻松访问所有props。

关键总结 #

• 别再用call(this)这种手动绑定上下文的方式了，箭头函数（不管是在mapDispatchToProps还是组件类里）已经能帮我们搞定上下文绑定。
• 要访问其他props，要么在mapDispatchToProps里通过ownProps参数获取，要么在组件实例方法里通过this.props直接访问。

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