Сделали таймер
This commit is contained in:
+28
-2
@@ -72,11 +72,37 @@ class MyComponent3 extends React.Component {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
class Timer extends React.Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
this.state = { seconds: 0 }
|
||||||
|
}
|
||||||
|
|
||||||
|
componentDidMount() {
|
||||||
|
console.log('Timer mounted');
|
||||||
|
this.interval = setInterval(()=>{
|
||||||
|
this.setState(prevState => ({seconds: prevState.seconds + 1}))
|
||||||
|
},1000);
|
||||||
|
}
|
||||||
|
|
||||||
|
componentWillUnmount() {
|
||||||
|
console.log('Timer unmount');
|
||||||
|
clearInterval(this.interval);
|
||||||
|
}
|
||||||
|
render() {
|
||||||
|
return <h2>Прошло секунд: {this.state.seconds}</h2>
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
function App() {
|
function App() {
|
||||||
|
const [show,setShow] = React.useState(true);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<h1>Hello, React!</h1>
|
<h1>Таймер с классом</h1>
|
||||||
<MyComponent />
|
<button onClick={()=>setShow(prev => !prev)}>{show ? 'Скрыть' : 'Показать'} таймер</button>
|
||||||
|
{show && <Timer />}
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -4,7 +4,5 @@ import { createRoot } from 'react-dom/client'
|
|||||||
import App from './App.jsx'
|
import App from './App.jsx'
|
||||||
|
|
||||||
createRoot(document.getElementById('root')).render(
|
createRoot(document.getElementById('root')).render(
|
||||||
<StrictMode>
|
|
||||||
<App />
|
<App />
|
||||||
</StrictMode>
|
|
||||||
)
|
)
|
||||||
|
|||||||
Reference in New Issue
Block a user