函数组件向类组件传递函数Props后调用无响应问题排查

你的父组件Props传递逻辑没问题，问题出在子组件的事件处理代码上，有三个关键错误需要修正：

1. 事件处理函数语法错误 #

子组件中handleClick的定义缺少括号，正确写法应为：

handleClick() {
  // ...
}

2. 未调用跳转函数 #

你只是获取了this.props.navigate引用，但没有执行它，必须加上括号调用才能触发路由跳转：

handleClick() {
  this.props.navigate();
}

3. 类组件this指向问题 #

类组件的普通方法默认不会绑定this，直接在onClick中使用会导致this为undefined，无法访问this.props，可以通过以下三种方式解决：

方式一：构造函数绑定this #

class MyEditor extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.props.navigate();
  }

  render() {
    return (
      <button onClick={this.handleClick}>跳转</button>
    );
  }
}

方式二：箭头函数定义handleClick #

箭头函数会自动绑定当前组件的this，写法更简洁：

class MyEditor extends React.Component {
  handleClick = () => {
    this.props.navigate();
  }

  render() {
    return (
      <button onClick={this.handleClick}>跳转到个人主页</button>
    );
  }
}

方式三：在onClick中直接使用箭头函数 #

class MyEditor extends React.Component {
  handleClick() {
    this.props.navigate();
  }

  render() {
    return (
      <button onClick={() => this.handleClick()}>跳转</button>
    );
  }
}

修正后的完整子组件代码（推荐方式二） #

class MyEditor extends React.Component {
  handleClick = () => {
    this.props.navigate();
  }

  render() {
    return (
      <button onClick={this.handleClick}>跳转到个人主页</button>
    );
  }
}

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