Question

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

这表明子组件未访问父元素中创建的函数。我在代码中错过了一个步骤，允许我从子组件引用父组件函数吗？

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

以下是我的代码：

注意：该流程应按如下方式运行：点击注册按钮＆gt;调用SignUpClick功能＆gt;渲染“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

更改父类中的render方法，将SignUpClick和SignInClick传递给child。

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

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

Answer 2

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

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

父母如何与传递道具的儿童进行沟通，而道具现在可以通过this.props访问。此时，您的子组件呈现方法将如下所示：

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

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

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

2 个答案: