Переменные (Состояния и пропсы)
Переменные (состояния)
В React есть переменные, которые называются состояния, и создаются в методе constructor()
через свойство thist.state
.
class Items extends React.Component { constructor(props) { super(props); this.state = {name: "React"}; } render() { return ( <p>Приложение: {this.state.name}</p> ); } } // Вывод данных в элементе "#app" ReactDOM.render(<Items />, document.getElementById("app"));
При изменении значения состояния, они автоматически изменятся в самом DOM.
В результате будет сгенерирован HTML:
<p>Приложение: React</p>
Когда состояние this.state
изменяется, то React снова вызывает render()
и генерирует приложение с новыми данными.
Состояния доступны в пределах текущего компонента.
Изменить состояние можно через метод this.setState()
.
// неправильно this.state.name = "JavaScript"; // правильно this.setState({name: "JavaScript"});
Если значение состояния задаётся через this.state
или this.props
, то рекомендуется использовать следующий код:
// неправильно this.setState({ name: this.state.value + this.props.value }); // правильно this.setState((state, props) => ({ name: state.value + props.value }));
React экранирует переменные (например, <h1>
преобразуется в <h1>
). Это сделано для предотвращения атак XSS.
Параметры (пропсы)
При создании React-приложения можно передавать параметры, которые будут доступны через объект props
.
class Item extends React.Component { render() { return ( <p>Приложение: {this.props.title}</p> ); } } ReactDOM.render(<Item title="React" />, document.getElementById("app")); // Приложение: React
Для каждого объекта можно передавать свой параметр:
ReactDOM.render(<div> <Item title="React" /> <Item title="JavaScript" /> <Item title="jQuery" /> </div>, document.getElementById("app")); // Приложение: React // Приложение: JavaScript // Приложение: jQuery
Параметры можно также получить в конструкторе.
class Items extends React.Component { constructor(props) { super(props); this.state = {name: props.title}; } render() { return ( <p>Приложение: {this.state.name}</p> ); } } // Вывод данных в элементе "#app" ReactDOM.render(<Items title="React" />, document.getElementById("app"));
Пропсы можно только читать. При попытке изменить пропс будет показываться ошибка «Cannot assign to read only property 'title' of object».
Авторизуйтесь, чтобы добавлять комментарии