Реагировать на функцию перезаписи компонента - PullRequest
Новая
       35

Реагировать на функцию перезаписи компонента

0 голосов
/ 05 декабря 2018

Я пытаюсь сделать следующее, в настоящее время у меня есть 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 для смонтированного экрана.Но по какой-то причине он просто выводит на консоль «применение оригинальных фильтров», которое является исходной строкой, как будто функция не перезаписывается обратным вызовом с экрана.

Есть идеи?

Спасибо заранее!

Ответы [ 2 ]

0 голосов
/ 05 декабря 2018

this.applyFilters разрешается на ранних этапах процесса рендеринга в () => {console.log("applying original filters")}

<Filters applyFilters={this.applyFilters} />

. В этом сценарии вы заботитесь только о его значении во время вызова функции, на которую оно ссылается, поэтому вы хотитеустановить его лениво. 

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

Таким образом, когда applyFilters вызывается в Filters компоненте, значение, на которое ссылается this.applyFilters, разрешается и затем вызывается.

0 голосов
/ 05 декабря 2018

После изменения 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>
    )
  }
}
...