时间戳

首页 > 解决方案 > 让 Clock 组件真正可重用和封装？在反应 JS 中？

javascript - 让 Clock 组件真正可重用和封装？在反应 JS 中？

问题描述

function Clock(props) {
  return (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {props.date.toLocaleTimeString()}.</h2>
    </div>
  );
}

function tick() {
  ReactDOM.render(
    <Clock date={new Date()} />,
    document.getElementById('root')
  );
}

setInterval(tick, 1000);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.0/umd/react-dom.production.min.js"></script>
<div id="root"></div>

问题：人们，请解释下面的代码，这里我们如何转移到第二个函数，比如{没有任何回调函数}？

标签： javascriptreactjsjsx

解决方案

您可以通过setInterval在组件中向上移动并使用它来更新其状态以使其重新渲染来实现这一点。

此外，reactDOM.render应该只被调用一次。

工作示例：

class Clock extends React.Component{

    state = { date: new Date() }

    componentDidMount(){
        setInterval(() => { this.setState({ date: new Date() })}, 1000);
    }

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

ReactDOM.render(
    <Clock />,
    document.getElementById('root')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.0/umd/react-dom.production.min.js"></script>
<div id="root"></div>

推荐阅读