如何在 react-bootstrap-table-next 表的列中显示倒计时？

Question

我目前在 react-bootstrap-table-next 表中有一个列显示过期日期。这是我定义列的方式：    const columns = [{      ...    }, {      dataField: 'expiresAt',      text: 'Expires',      formatter: timestampFormatter    }];（...为简洁起见，我用 替换了其他列。）这是 timestampFormatter 函数：    function timestampFormatter(cell, row) {      if (cell == null) {        return cell;      } else {        return (moment(cell).utcOffset(cell).local().format('llll'));      }    }下面是此列中一个单元格现在的样子的示例：我想用倒计时替换这些单元格，显示天数、小时数和分钟数（如果还剩不到一分钟，则显示秒数）直到到期。我当然可以编写代码来创建一个字符串。但我不知道如何让此列中的单元格每秒更新一次。我可以timestampFormatter用这样的东西替换：    function countdownFormatter(cell, row) {      return (        <Countdown expires={cell} />      );    }...并在 Countdown 组件的 render 方法中计算倒计时字符串。但是由于组件的 props 永远不会改变，它们不会重新渲染。我可以做这样的事情：    function countdownFormatter(cell, row) {      countdownString = countdownFromExpiration(cell);      return (        <Countdown countdown={countdownString} />      );    }但是后来我不知道如何安排 countdownFormatter 函数以使其每秒都被调用。

Answer 1

Code Maniac对我的问题的评论建议使用 setTimeOut 为我提供了自己解决其余问题所需的一切。正如我在问题中所考虑的那样，我确实创建了一个倒计时组件。这是我想出的代码：

class Countdown extends Component {

  state = {

    timeRemainingString: getTimeRemainingString(this.props.expires)

  };

  componentDidMount() {

    this.updateState();

  }

  updateState() {

    this.setState({ timeRemainingString:

                    getTimeRemainingString(this.props.expires) });

    this.timeout = setTimeout(() => { this.updateState() }, 1000);

  }

  componentWillUnmount() {

    clearTimeout(this.timeout);

  };

  render() {

    return ( this.state.timeRemainingString );

  }

}