React Redux子组件无法访问props问题求助

嘿，我来帮你搞定这个问题！这种情况十有八九是函数的this绑定出问题了，或者是props传递环节漏了。我给你拆解几种常见的原因和对应的解决办法：

1. 最常见的原因：renderFoo的this没绑定到组件实例 #

在类组件里，普通的方法默认不会自动把this绑定到组件实例上。如果你是这么写的：

class ChildComponent extends React.Component {
  renderFoo() {
    // 这里的this可能是undefined，自然拿不到this.props
    console.log(this.props); // 输出undefined
  }

  render() {
    console.log(this.props); // 能正常访问
    return <div>{this.renderFoo()}</div>;
  }
}

解决办法有三种，选一种你顺手的就行：

• 方法一：在构造函数里手动绑定this

  constructor(props) {
    super(props);
    // 把renderFoo的this绑定到组件实例
    this.renderFoo = this.renderFoo.bind(this);
  }
  

• 方法二：用箭头函数定义renderFoo
  箭头函数会自动捕获外层的this（也就是组件实例），不用手动绑定：

  renderFoo = () => {
    return <p>能拿到props啦：{this.props.someValue}</p>;
  };
  

• 方法三：调用时用箭头函数包裹
  临时在render里给renderFoo绑定this：

  render() {
    return (
      <div>
        {(() => this.renderFoo())()}
        {/* 或者更简洁的写法 */}
        {this.renderFoo.bind(this)()}
      </div>
    );
  }
  

2. 检查父组件是否正确传递了props #

别忘了，子组件的props是父组件传过来的！如果父组件从Redux拿到值后，没传给子组件，那子组件肯定拿不到。比如父组件要这样写：

// 父组件（已经通过mapStateToProps拿到redux里的值）
class ParentComponent extends React.Component {
  render() {
    // 一定要把redux里的值作为props传给子组件
    return <ChildComponent foo={this.props.redexFooValue} />;
  }
}

3. 函数组件的特殊情况 #

如果你的子组件是函数组件，那根本没有this，要直接用参数里的props：

const ChildComponent = (props) => {
  const renderFoo = () => {
    // 直接用props，不用this.props
    return <p>props的值：{props.someValue}</p>;
  };

  return (
    <div>
      <h3>子组件内容</h3>
      {renderFoo()}
    </div>
  );
};

额外小技巧：直接把props传给renderFoo #

不管是类组件还是函数组件，你都可以在调用renderFoo的时候直接把props传进去，这样就不用纠结this的问题了：

// 类组件写法
render() {
  return <div>{this.renderFoo(this.props)}</div>;
}

renderFoo(props) {
  return <p>{props.someValue}</p>;
}

// 函数组件写法
const ChildComponent = (props) => {
  const renderFoo = (props) => {
    return <p>{props.someValue}</p>;
  };

  return <div>{renderFoo(props)}</div>;
};

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