javascript - (ReactJS) 函数未传递给子组件

Question

我正在尝试将 props 和函数从 React 中的父组件传递到子组件。但是，当我尝试在子组件中调用该函数时，收到错误:“Uncaught TypeError:无法读取未定义的属性“bind””。

这表明子组件没有访问在父元素中创建的函数。我的代码中是否缺少允许我从子组件引用父组件函数的步骤？

我将状态定义为父组件中的 Prop ，用于子组件中的条件渲染。我还在父组件中定义函数，我试图在子组件中调用该函数。

下面提供的是我的代码:

注意:流程应该按如下方式工作:单击“注册”按钮 > 调用 SignUpClick 函数 > 渲染“SignUp”组件(基于子组件中概述的条件渲染逻辑)

如果有人单击“登录”按钮，则将应用相同的流程概念。

父组件

  export default class Parent extends Component{

  constructor(props) {
    super(props);

    this.state = {
      SignUpClicked: false,
      SignInClicked: false,
    };

    this.SignUpClick = this.SignUpClick.bind(this);
    this.SignInClick = this.SignInClick.bind(this);

  }

    SignUpClick() {
      this.setState({
        SignUpClicked: true,
      });
    }

    SignInClick() {
      this.setState({
        SignInClicked: true,
      });
    }

  render () {

    return (
      <div>
           <Child />
      </div>
    )
  }
}

子组件

export default class Child extends Component {

  render () {

  if (this.props.SignUpClicked) {
    return(
      <SignUp />
    ) } else if (this.props.SignInClicked) {
    return (
      <SignIn />
    )
  } else {
      return (
      <div>
        <div>
            <Button onClick={this.SignUpClick.bind(this)}> Sign Up </Button>
         </div>
         <div>
           <Button onClick={this.SignInClick.bind(this)}>Sign In</Button>
         </div>
      </div>
          )
        }
  }
}

Answer 1

更改父类中的渲染方法，将 SignUpClick 和 SignInClick 传递给子类。

return (
  <div>
       <Child SignInClick={this.SignInClick} SignUpClick={this.SignUpClick}/>
  </div>
)

此外，在子类中，访问 this.props.SignUpClick 和 this.props.SignInClick 方法