Compare commits
3 Commits
lesson-7.1
...
lesson-12
| Author | SHA1 | Date | |
|---|---|---|---|
| 6827c800f1 | |||
| 5ee1bf2eee | |||
| c137c644e3 |
+51
-3
@@ -1,10 +1,58 @@
|
||||
// удаляем все, оставляя лишь пустую функцию App ниже
|
||||
import React from 'react'
|
||||
|
||||
class RandomUser extends React.Component {
|
||||
constructor(props) {
|
||||
super(props)
|
||||
this.state = { user: {} }
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
fetch('https://randomuser.me/api')
|
||||
.then(responce => responce.json())
|
||||
.then(json => this.setState({ user: json.results[0] }));
|
||||
console.log('смонтирован')
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps,prevState) {
|
||||
console.log(this.state);
|
||||
console.log('Компонент обнвлен')
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
console.log('Компонент таймера размонтирован')
|
||||
}
|
||||
|
||||
render() {
|
||||
return <div>
|
||||
{this.state.user &&
|
||||
this.state.user.name &&
|
||||
(
|
||||
<>
|
||||
<h2>{this.state.user.name.first} {this.state.user.name.last}</h2>
|
||||
<img src={this.state.user.picture.medium} />
|
||||
<button onClick={() => {
|
||||
console.log('Загружаем ... ')
|
||||
fetch('https://randomuser.me/api')
|
||||
.then(responce => responce.json())
|
||||
.then(json => this.setState({ user: json.results[0] }));
|
||||
}}>Загрузить нового</button>
|
||||
</>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
}
|
||||
}
|
||||
|
||||
function App() {
|
||||
const [showClock, setShowClock] = React.useState(true);
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Добавьте тестовый контент для проверки */}
|
||||
<h1>Hello, React!</h1>
|
||||
<h1>Домашнее задание: жизненый цикл</h1>
|
||||
<button onClick={()=> setShowClock(!showClock)}>
|
||||
{showClock ? 'Скрыть часы' : 'Показать часы' }
|
||||
</button>
|
||||
{showClock && <RandomUser />}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -4,7 +4,5 @@ import { createRoot } from 'react-dom/client'
|
||||
import App from './App.jsx'
|
||||
|
||||
createRoot(document.getElementById('root')).render(
|
||||
<StrictMode>
|
||||
<App />
|
||||
</StrictMode>
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user