Реагирует на состояние набора из CountDown потомка

Question

У меня есть компонент <CountDown/>, который я хотел бы сохранить в своей собственной логике, чтобы его можно было повторно использовать в другом месте приложения.

Я изо всех сил пытаюсь понять, как я могу setState до show:true на элементе одного брата, т.е. <List/>, когда счет достигнет 0.

В настоящее время это иерархиякомпоненты:

export default class App extends Component {
  state = { show: false };

  render() {
    return (
      <div className="App">
        <Countdown />
        <List {...this.state} />
      </div>
    );
  }
}

Я хотел бы показать содержимое <List/>

const fruits = ["banana", "apple", "peach"];
export const List = ({ show }) => fruits.map(fruit => <li className={show ? "show" : "hide"}>{fruit}</li>);

Однажды currentCount = 0

import React, { Component } from "react";

export default class Countdown extends Component {
  state = { currentCount: 3 };

  // decrement timer method
  timer() {
    this.setState({
      currentCount: this.state.currentCount - 1
    });
    //clear interval
    if (this.state.currentCount < 1) {
      clearInterval(this.intervalId);
    }
  }

  // decrement every second i.e 1000
  componentDidMount() {
    this.intervalId = setInterval(this.timer.bind(this), 1000);
  }

  // Perform any necessary cleanup in this method, such as invalidating timers, canceling network requests, or cleaning up any subscriptions that were created in componentDidMount().
  componentWillUnmount() {
    clearInterval(this.intervalId);
  }
  render() {
    const { currentCount } = this.state;
    return <h1>{currentCount}</h1>;
  }
}

Моя борьба заключается в том, что если бы я поднял состояние currentCount до основного <App/>, я бы потерял способность контролировать <CountDown/> с помощью его собственных методов состояния и жизненного цикла.Кроме того, я бы хотел, чтобы у CountDown был свой собственный набор логики, чтобы его можно было многократно использовать в приложении, где бы я ни нуждался.

Вопрос: Как установить состояниеshow (передается как реквизит) в значение true, когда обратный отсчет достигнет 0?

Вот песочница с кодом

Answer 1

Вы можете создать showList() в <App> и передать его <CountDown /> Я изменил следующую часть кода

timer() {
    this.setState({
      currentCount: this.state.currentCount - 1
    });
    //clear interval
    if (this.state.currentCount < 1) {
      clearInterval(this.intervalId);
      //This line is edited
      this.props.showList();
    }
  }

Компонент приложения

export default class App extends Component {
  state = { show: false };
  showList = () =>{
    this.setState({show:true});
  }
  render() {
    return (
      <div className="App">
        <Countdown showList={this.showList}/>
        <List {...this.state} />
      </div>
    );
  }
}

Codesandbox

Answer 2

Определите метод в приложении, который установит для состояния show значение true:

onFinish = () => {
   this.setState({ show: true });
};

Теперь отправьте его как реквизит в CountDown:

<Countdown onFinish={this.onFinish} />

Теперь вызовите его один разваше локальное состояние достигло нуля:

if (this.state.currentCount < 1) {
    clearInterval(this.intervalId);
    this.props.onFinish();
}

Вот вилка вашей песочницы

Я также переместил эту последнюю часть кода при обратном вызове setState, потому что setState работает асинхронно.