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

Question

我目前在 react-bootstrap-table-next table 中有一列显示到期日期。这是我定义列的方式：

    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 方法中计算倒计时字符串。但是由于组件的道具永远不会改变，所以它们不会重新渲染。

我可以这样做：

    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 );
  }
}

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

How do I display countdowns in a column of a react-bootstrap-table-next table?

javascript

reactjs

react-bootstrap-table