От автора: в React состояния — это места, откуда поступают данные. Мы всегда должны стараться максимально упростить состояние и свести к минимуму количество компонентов состояния. Если у нас есть, например, десять компонентов, которым нужны данные из состояния, мы должны создать один компонент контейнера, который будет сохранять состояние для всех.
Использование свойства
Следующий пример кода показывает, как создать компонент с состоянием, используя синтаксис EcmaScript2016.
App.jsx
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
import React from 'react'; class App extends React.Component { constructor(props) { super(props); this.state = { header: "Header from state...", content: "Content from state..." } } render() { return ( <div> <h1>{this.state.header}</h1> <h2>{this.state.content}</h2> </div> ); } } export default App; |
main.js
|
1 2 3 4 5 |
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.jsx'; ReactDOM.render(<App />, document.getElementById('app')); |
Это дает следующий результат.
Источник: //www.tutorialspoint.com/
Редакция: Команда webformyself.
