Как получить текущие состояние react

246

25 июля 2018, 13:10

Вопрос такой: есть два компонента в первом компоненте есть состояние которое меняется когда идет скрол страницы оно же передается через props к в второму компоненту.

Как второму компоненту постоянно получать уже измененное состояние из первого?

Первый компонент:

state = { classelemetn: true, buttonopacty:1, num:0 };
<Skil num = {this.state.num}/>
componentDidMount() {
    let d = document.getElementById("go_0skil_bar");
    let topPos = d.offsetTop;
    let flag2 = false;
    window.onscroll = () => {
        let scrolled = window.pageYOffset || document.documentElement.scrollTop;
        let rez = topPos - scrolled;
        if (rez < 700 && flag2 === false) {
            this.setState({ num:rez });
            flag2 = true;
        }
    }
}

Второй компонент:

componentDidMount() {
    if (this.props.num <= 700 && this.props.num != 0) {
        console.log(this.props.num);
    }
}

Answer 1

Чтобы постоянно получать уже измененные значения в реакте предусмотрен под это хороший метод componentDidUpdate, который вызывается всегда после обновления (правда для первоначального рендеринга он не вызывается). Структура метода такая:

componentDidUpdate(prevProps, prevState, snapshot)

Этот метод как правило используется для возможности работы с DOM при обновлении компонента. Судя по вашему вопросу - это то, что нужно. Для примера приведу блок кода (согласно документации и вашему вопросу) по этому методу:

componentDidUpdate(prevProps) {
  // проверим, изменилось ли поле `num`
  if (this.props.num !== prevProps.num) {
    console.log(this.props.num); // вывести в консоль обновленное поле
  }
}

Как вы уже заметили, не обязательно использовать все параметры метода, для вашего случая достаточно только первого параметра prevProps. Для справки по этому методу добавлю информации о пропсах: