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

您传递给子组件的道具被命名为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()
}

Answer 2

您只需要致电toggle而不是toggleDropdown。

this.props.toggle();

Answer 3

子组件的属性命名为toggle，而toggleDropdown属于父组件。

这应该在子组件中起作用：

removeItem() {
    this.props.toggle();
}