反应覆盖组件功能

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 作为道具传递给过滤器零件。当调用过滤器的 onButtonPressed 处理程序时，它应该为已安装的屏幕执行 applyFilter 回调。

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

如何正确执行此操作？

Answer 1

在父级上更改 applyFilters 后，重新渲染它，即使用 forceUpdate 使 Filter 组件接收更改后的功能。

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

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

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

Answer 2

this.applyFilters 在渲染过程早期解析为 () => {console.log("applying original filters")}

<Filters applyFilters={this.applyFilters} />

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

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

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

反应覆盖组件功能

React overwrite component function

javascript

reactjs

react-props

react-component