javascript - React 覆盖组件函数

Question

我正在尝试执行以下操作，目前我有 3 个组件:

Parent.js:

class Parent extends Component {
  applyFilters = () => {console.log("applying original filters")}

  setApplyFilters = (callback) => {
    this.applyFilters = () => callback();
  }

  render(){
    return(
      <div>
        <Filters applyFilters={this.applyFilters} />
        <Screen1 setApplyFilters={this.setApplyFilters} />
      </div>
    )
  }
}

Filters.js:

class Filters extends Component {
  onButtonPress = () => {
    this.props.applyFilters(),
  }

  render(){
    ...
  }
}

Screen1.js:

class Screen1 extends Component {
  applyFilter = () => {
    console.log("Applying filters using the callback function in Screen1");
  }

  componentDidMount = () => {
    this.props.setApplyFilters(() => this.applyFilters());
  }

  render(){
    ...
  }
}

我有一个所有屏幕通用的过滤器组件。我有多个 Screen1 类型的屏幕。

我想在当前屏幕的 componentDidMount 上将 applyFilter 函数作为回调传递给父级，并从父级传递 applyFilter > 作为 Filter 组件的支柱。当调用过滤器的 onButtonPressed 处理程序时，它应该为已安装的屏幕执行 applyFilter 回调。

但由于某种原因，它只是打印到控制台“应用原始过滤器”，这是原始字符串，就好像该函数没有被屏幕上的回调覆盖一样。

如何正确执行此操作？

Answer 1

this.applyFilters 在渲染过程的早期就被解析为 () => {console.log("applying originalfilters")}

<Filters applyFilters={this.applyFilters} />

在这种情况下，您只关心它引用的函数被调用时的值，因此您希望延迟设置它。

<Filters applyFilters={() => this.applyFilters()} />

这样，当在 Filters 组件中调用 applyFilters 时，this.applyFilters 中引用的值将被解析，然后被调用。