Блог

Итак, у меня есть родительский компонент [PC] -> и компоненты родственного / дочернего элемента [SC]

[SC1] отображает и очищает данные с помощью действий redux

[SC2] и [SC3] — это выпадающие меню, в которых отображаются элементы, из которых я также пытаюсь получить значения для очистки. У них есть свои clearQuery реквизиты, принадлежащие сторонней библиотеке, которую я использую. Я могу получить доступ только clearQuery из этих компонентов.

По сути, я пытаюсь запустить clearQuery действие из компонента [SC1]

После проведения некоторых исследований я решил использовать this.ref . Это сработало на [SC2]! Как только я проделал то же самое с [SC3] Я получил сообщение об onRef is not a function ошибке.

Вот как выглядит мой код

 class Parent extends PureComponent {
  clear = () => {
    this.ref.clearValue();
  };

  render() {
    return (
      <View>
        <SiblingComponent1 clear={this.clear} />
        <SiblingComponent2 onRef={ref => (this.ref = ref)} />
        <SiblingComponent3 onRef={ref => (this.ref = ref)} />
      </View>
    );
  }
}

class SiblingComponent2 extends PureComponent {
  componentDidMount() {
    const { onRef } = this.props;
    onRef(this);
  }

  componentWillUnmount() {
    const { onRef } = this.props;
    onRef(null);
  }

  clearValue = () => {
    const { setQuery } = this.props;
    setQuery(null);
  };
}
class SiblingComponent3 extends PureComponent {
  componentDidMount() {
    const { onRef } = this.props;
    onRef(this);
  }

  componentWillUnmount() {
    const { onRef } = this.props;
    onRef(null);
  }

  clearValue = () => {
    const { setQuery } = this.props;
    setQuery(null);
  };
}
 

Возможно, я неправильно понимаю ссылки.

Как мне решить эту проблему?

Спасибо!