React组件间传递Props与调用函数问题求助

嘿，我来帮你梳理下问题所在，你遇到的点击按钮没反应的情况，主要是两个关键问题导致的，咱们一步步解决：

1. 类方法的this绑定丢失 #

在你的Navigation组件里，nextStep和previousStep这两个类方法直接传递给子组件时，this的指向会丢失，导致调用this.setState时出错（因为此时this不再指向组件实例）。

修复方案：绑定this #

有两种常用方式可以解决：

• 在构造函数中手动绑定：

constructor(props){
  super(props)
  this.state = {
    step : 1
  }
  // 将方法的this绑定到组件实例
  this.nextStep = this.nextStep.bind(this)
  this.previousStep = this.previousStep.bind(this)
}

• 用箭头函数定义方法（更简洁的写法）：

nextStep = () => {
  this.setState({ step : this.state.step + 1 })
}

previousStep = () => {
  this.setState({ step : this.state.step - 1 })
}

2. Footer组件未接收传递的Props #

你的Homepage组件渲染Footer时，没有把Navigation传过来的nextStep和previousStep传递给Footer——这就导致Footer的props里根本没有这两个方法，点击按钮自然没有任何反应。

修复方案：给Footer传递Props #

修改Homepage的代码，把父组件传来的方法透传给Footer：

class Homepage extends Component{
  render(){
    return(
      <React.Fragment>
        <h1>Homepage </h1>
        {/* 把接收到的方法传递给Footer组件 */}
        <Footer 
          nextStep={this.props.nextStep} 
          previousStep={this.props.previousStep} 
        />
      </React.Fragment>
    )
  }
}
export default Homepage

注意：其他页面（Artist、Facilites等）也需要做同样的修改，把接收到的nextStep和previousStep传递给各自的Footer组件。

额外说明：React vs Java的调用差异 #

在Java里你可以直接通过类名调用静态方法，但React的组件是基于实例的——父组件的方法需要通过Props传递给子组件，子组件再通过props调用这些方法。而且类组件的方法必须确保this指向组件实例，不然无法正确访问state和setState。

把这两处修改完成后，点击Footer的按钮就能正常切换步骤啦！

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