Question

我试图在React组件中创建一个时钟计时器。但是我遇到了困难。任何帮助，将不胜感激。

import React from "react";
import ReactDOM from "react-dom";

export default class App extends React.Component {
  render() {
    return (
      <ShowDate />
    );
  }
}

ReactDOM.render(<App/>, document.getElementById('app'));

function ShowDate() {
  return {new Date().toLocaleTimeString()};
}

setInterval(ShowDate, 1000);

Answer 1

React教程有这个例子：

function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  ReactDOM.render(
    element,
    document.getElementById('root')
  );
}

setInterval(tick, 1000);

最有可能的是，你会避免编写这样的代码。请参阅以下注释：

注意：实际上，大多数React应用程序只调用一次ReactDOM.render（）。在接下来的部分中，我们将了解如何将此类代码封装到有状态组件中。我们建议您不要跳过主题，因为它们是相互依赖的。

class App extends React.Component {
  constructor(props) {
    super(props);
    this.updateDate = this.updateDate.bind(this);
    
    this.state = {
      date: new Date().toLocaleTimeString(),
    }
    this.interval = setInterval(this.updateDate, 1000);
  }
  
  componentWillUnmount() {
    clearInterval(this.interval);
  }
  
  updateDate() {
    this.setState({
      date: new Date().toLocaleTimeString(),
    });
  }
  
  render() {
    return(
      <div>{this.state.date}</div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

如果您只是在本教程中进行操作，则可以使您的代码以与示例相同的方式工作：

const App = () => (
  <div>{new Date().toLocaleTimeString()}</div>
);

function tick() {
  ReactDOM.render(
    <App />,
    document.getElementById('root')
  );
}
    
ReactDOM.render(<App/>, document.getElementById('root'));
setInterval(tick, 1000);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

React JS，在Component中创建一个时钟计时器

1 个答案: