React - 在组件函数内调用props函数

Question

试着这样做:

//组件一

toggleDropdown() {
  setState({open: !open}
}

render () {
  return (
   ChildComponent toggle={this.toggleDropdown} />
  )
}

然后在我的子组件中,我想在另一个函数中调用toggleDropdown函数,如下所示:

// This gets triggered on click.
removeItem() {
  // remove scripts then:
  this.props.toggleDropdown()
}

我以为你可以做这样的事情,但似乎你只能在元素上调用prop函数？

Answer 1

您传递给子组件的prop是命名toggle而不是toggleDropdown,因此您需要像removeItem组件中那样调用它

// This gets triggered on click.
removeItem() {
  this.props.toggle()
}

您可能需要做的其他事情是removeItem使用bind或绑定您的函数arrow functions

constructor(props) {
    super(props);
    this.removeItem = this.removeItem.bind(this);
}

要么

// This gets triggered on click.
removeItem = () => {
  this.props.toggle()
}