React js组件更新

Question

import React from 'react'
class Clock extends React. Component{
constructor(){
super();
this.State={
date: new Date()
}
}
render(){
return(
<>
<h1>{this.state.date.toLocaleTimeString()}</h1>
</>
)
}
}
export default Clock;
import Clock from './Clock';
const root=ReactDOM.createRoot(document. getElementById("root"));
const clock=()=> {
console.log("hi");
root.render(<Clock/>)
}
setInterval(() => {
clock();
}, 1000);

每隔一秒我们调用index.js中的时钟函数，所以这意味着每隔一秒渲染元素，但它不会每隔一秒在浏览器中更新。在控制台"hi"正在打印，这意味着我的时钟功能每秒钟都在运行。我在这个概念中遗漏了什么?

Answer 1

React只在状态改变时才改变呈现。所以要改变状态，你必须设置它。你可以试试:

componentDidMount() {
this.setState({ date: new Date() })
}

Answer 2

您应该将props从父组件传递给子组件

Clock.js

import React from "react";
class Clock extends React.Component {
render() {
return (
<>
<h1>{this.props.date.toLocaleTimeString()}</h1>
</>
);
}
}
export default Clock;

index.js文件

import { createRoot } from "react-dom/client";
import Clock from "./Clock";
const rootElement = document.getElementById("root");
const root = createRoot(rootElement);
setInterval(() => {
root.render(<Clock date={new Date()} />);
}, 1000);

现场演示:https://codesandbox.io/s/passing-props-to-child-fo47ic