React.js：从父组件传递到子组件的函数未被调用

Question

我是初学者，正在尝试学习 React。我有一个父组件，其状态为布尔值，我使用其 class 中定义的函数 rerender() 进行更改。我将这个函数向下传递到子组件的道具中，如下所示：

<Todolist
  color={color}
  name={name}
  items={items}
  addListItem={this.addListItem}
  rerender={() => this.rerender}
/>

我在该函数中有一个 console.log 来检查它是否被调用。我在子组件中这样称呼它：

this.props.rerender();

我确定在子组件中调用 this.props.rerender() 的 onChange 事件正在触发，那么它没有被调用的可能原因是什么？

Answer 1

这将不起作用，因此不会调用该函数，2 个选项：

 rerender={() => this.rerender()}

或

 rerender={this.rerender}

后一个会得到传递给它的任何参数，但第一个不会得到任何参数。

如果未定义为箭头函数，您可能需要 bind this.renderer。

React.js: Function passed from parent component to child component not getting called