javascript - 从 CountDown 子项中 react 设置状态

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 的状态一旦倒计时达到 0，(作为 prop 向下传递)为 true？

这是一个code sandbox

Answer 1

在 App 中定义一个方法，将状态 show 设置为 true:

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

现在将其作为 Prop 发送到 CountDown:

<Countdown onFinish={this.onFinish} />

现在，一旦您本地的州达到零，就调用它:

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

这里是your Sandbox's fork

我还将最后一部分代码移到了 setState 的回调上，因为 setState 以异步方式工作。