Question

这是一个简单的React.js脚本，但找不到原因。我认为这个问题对于最初的React开发人员来说是一个普遍的疑问。请帮忙。

显示的错误是“ this.props.parentClick不是函数”。

class App extends Component {
  constructor() {
    super();
    this.state = {
      name: 'React'
    };

  }
  parentClick()  {

  }
  render() {
    return (
      <div>
         <Test childClick={this.parentClick}/> 
      </div>
    );
  }
}
class Test extends Component{
   constructor(props){
     super(props);
     this.childClick = this.childClick.bind(this);
   }
   childClick(){
     this.props.parentClick();
   }
   render() {
    return (
      <div>
        <button onClick={()=>this.childClick()}>click</button>
      </div>
    );
  }
}  

render(<App />, document.getElementById('root'));

这是stackblitz.com中的代码。 https://stackblitz.com/edit/react-3zt7qm

Answer 1

您的道具称为childClick而不是parentClick

尝试：

class App extends Component {
  constructor() {
    super();
    this.state = {
      name: 'React'
    };

  }
  parentClick()  {

  }
  render() {
    return (
      <div>
         <Test parentClick={this.parentClick}/> // Here the name of your prop should be parentClick
      </div>
    );
  }
}

Answer 2

此功能在您的“测试”组件内部：

childClick(){
   this.props.parentClick();
}

应该调用this.props.childClick()，因为那是您传递到Test组件中的道具。

this.props.parentFunction不是函数

2 个答案: