Javascript （ReactJS）函数未传递给子组件

我试图在React中将道具和函数从父组件传递给子组件。但是，当我尝试调用子组件中的函数时，我收到错误：“uncaughttypeerror:无法读取未定义的”的属性“bind”

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

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

以下是我的代码：

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

如果有人单击“登录”按钮，同样的流程概念也适用

父组件

  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>
          )
        }
  }
}

导出默认类父扩展组件{
建造师（道具）{
超级（道具）；
此.state={
注册：false，
签名：假，
};
this.SignUpClick=this.SignUpClick.bind（this）；
this.SignInClick=this.SignInClick.bind（this）；
}
注册点击（）{
这是我的国家({
注册点击：对，
});
}
signlick（）{
这是我的国家({
签名：是的，
});
}
渲染（）{
返回(
)
}
}

子组件

  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>
          )
        }
  }
}

导出默认类子扩展组件{
渲染（）{
如果（单击此.props.SignUpClicked）{
返回(
)}else if（this.props.signClicked）{
返回(
)
}否则{
返回(
注册
登录
)
}
}
}

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

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

返回(
)

---

另外，在子类中，访问this.props.SignUpClick和this.props.SignInClick等方法更改父类中的渲染方法以将SignUpClick和SignInClick传递给子类

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

返回(
)

---

另外，在子类中，访问this.props.SignUpClick和this.props.SignInClick等方法如果您仔细考虑，子组件将从何处获取这些函数的引用？父级需要给子级访问这些方法的权限，以及父级如何使用道具将数据传递给子级！在您的情况下，您根本没有将任何道具传递给子级，因此父级渲染方法应该是这样的：

render () {
  return (
    <div>
      <Child
        signUpClicked={this.state.SignUpClicked}
        signInClicked={this.state.SignInClicked}
        onSignUpClick={this.onSignUpClick}
        onSignInClick={this.onSignInClick}
      />
    </div>
  );
}

---

我使用了解构来帮助提高可读性。希望这有帮助

仔细想想，子组件将在哪里获取这些函数的引用？父级需要给子级访问这些方法的权限，以及父级如何使用道具将数据传递给子级！在您的情况下，您根本没有将任何道具传递给子级，因此父级渲染方法应该是这样的：

render () {
  return (
    <div>
      <Child
        signUpClicked={this.state.SignUpClicked}
        signInClicked={this.state.SignInClicked}
        onSignUpClick={this.onSignUpClick}
        onSignInClick={this.onSignInClick}
      />
    </div>
  );
}

---

我使用了解构来帮助提高可读性。希望这有帮助

您需要将其作为道具传递…

this.signUp（）}>

然后在Child:

this.props.onSingUp（）}>上注册

您需要将其作为道具传递…

this.signUp（）}>

然后在Child:

this.props.onSingUp（）}>上注册