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

【问题标题】：(ReactJS) Function not passing to child component（ReactJS）函数未传递给子组件
【发布时间】：2018-08-27 13:13:37
【问题描述】：

我试图在 React 中将 props 和函数从父组件传递给子组件。但是，当我尝试在子组件中调用该函数时，我收到错误：“Uncaught TypeError: Cannot read property 'bind' of undefined”。

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

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

下面是我的代码：

注意：流程应该是这样的：点击注册按钮>调用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>
          )
        }
  }
}

【问题讨论】：

你需要将它作为道具传递...
<Child onSignUp={() => this.signUp()}>
然后是孩子：<Button onClick={() => this.props.onSingUp()}> Sign Up </Button>

标签： javascript reactjs dom

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

如果您考虑一下，子组件会在哪里获取这些函数的引用？父母需要让孩子访问这些方法，以及父母如何使用道具将数据传递给孩子！在您的情况下，您根本没有将任何道具传递给孩子，因此您的父渲染方法应该如下所示：

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

这就是父母与孩子交流的方式，传递现在可以通过this.props 访问的道具。此时您的 Child 组件渲染方法将如下所示：

render () {
  const {
    signUpClicked,
    signInClicked,
    onSignUpClick,
    onSignInClick,
  } = this.props;

  if (signUpClicked) {
    return(<SignUp />);
  } else if (signInClicked) {
    return (<SignIn />);
  } else {
    return (
      <div>
        <Button onClick={onSignUpClick}> Sign Up </Button>
        <Button onClick={onSignInClick}>Sign In</Button>
      </div>
    )
 }
}

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

【讨论】：