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(){
    ...
  }
}

我的困境是，我有一个所有屏幕都共用的Filters组件，我有多个Screen1类型的屏幕，所以我想在当前屏幕的componentDidMount上通过applyFilter函数作为回调父级，然后从父级将applyFilter作为道具传递给Filter组件。调用过滤器的onButtonPressed处理函数时，它应为已安装的屏幕执行applyFilter回调。但是由于某种原因，它只是打印到控制台上“正在应用原始过滤器”（原始字符串），就好像该函数没有被屏幕上的回调所覆盖。

有什么想法吗？

感谢进阶！

Answer 1

在父项上更改Instant future1Week = Instant.now().plus(1, ChronoUnit.WEEKS);后，重新渲染它，即用applyFilters重新呈现，以使forceUpdate组件接收更改后的功能。

Filter

Answer 2

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

<Filters applyFilters={this.applyFilters} />

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

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

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

反应覆盖组件功能

2 个答案: