一个定时控件，为什么无效？加一个按钮，按钮值是new Date().toLocaleTimeString()，怎么写？

Question

Ba.jsx

import React from 'react';

const element = (
    <div>
        <h1>Hello, world!</h1>
        <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
);

function tick() {
    element
}

class Clock extends React.Component {

    setInterval(tick, 1000);
    render() {
        return (
            element
        );
    }
}
export default Clock;

Answer 1

思路有些问题，tick函数只是执行了React.createElement这个函数，什么也没返回，影响不到element的。

可以直接把element组件拿去渲染，在componentDidMount方法里面设一个定时器定时执行setState就好了。

代码大概这样

class Clock extends React.Component {
  constructor(props) {
    super(props);
  }

  static timer = null;

  componentDidMount() {
    if (this.timer) return;
    this.timer = setInterval(() => this.setState({}));
  }

  componentWillUnmount() {
    clearInterval(this.timer);
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {new Date().toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

没测试过，可能会有小问题，大概思路是这样