Question

以下示例与official docs中记录的示例非常相似。我们假设我们有一个Clock组件，它表示为函数（不是类）：

//Clock.jsx
function Clock(props) {

  setInterval(()=>{
     // ??? how to trigger forceUpdate/render here???
  }, 1000);


  return (
    <div>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
}
export default Clock;

然后让我们说一些导入此文件的父组件：

//index.jsx
import Clock from 'Clock'

..
render(){ return (
  <div>
     <Clock />
  </div>);
}
..

如果没有让Clock成为一个班级，有没有办法做到这一点？

Answer 1

您可以将setInterval移动到父类中，并将您希望Clock组件呈现的值传递给时钟。

我会在父类的setInterval内设置componentDidMount，并将回调设为getCurrentTime函数，只有return new Date().toLocaleTimeString()。这将触发渲染，这将更新时钟的道具。

这会使Clock组件成为一个愚蠢的组件，因为它只显示智能组件传递给它的信息。

React：如何触发forceUpdate / render of component作为函数（不是class）？

1 个答案: