React JS для начинающих: Обзор и валидация Props

Основное различие между состояниями и свойствами (props), в том что свойства нельзя изменить. Поэтому контейнер с основным компонентом должен определять состояние, которое можно обновить и изменить, в то время как вложенные компоненты должны передавать только данные из состояния с использованием свойств.

react props

React JS для начинающих:

Использование свойств

Когда в компоненте вам понадобятся данные без возможности их изменения, вы можете просто добавить свойство с функцией reactDOM.render() в main.js и использовать его внутри компонента.

App.jsx

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            <h1>{this.props.headerProp}</h1>
            <h2>{this.props.contentProp}</h2>
         </div>
      );
   }
}

export default App;

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App headerProp = "Header from props..." contentProp = "Content
   from props..."/>, document.getElementById('app'));

export default App;

Результат:

react свойства

Стандартные свойства

Можно также устанавливать значения свойств по умолчанию, непосредственно в компоненте конструктора вместо того, чтобы добавлять их к элементу reactDom.render().

App.jsx

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            <h1>{this.props.headerProp}</h1>
            <h2>{this.props.contentProp}</h2>
         </div>
      );
   }
}

App.defaultProps = {
   headerProp: "Header from props...",
   contentProp:"Content from props..."
}

export default App;

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App/>, document.getElementById('app'));

Результат будет таким же:

react свойства

React state и props

В приведенном ниже примере мы объединяем состояние и свойства в одном приложении. Устанавливаем состояние в родительском компоненте и передаем его по дереву элементов во вложенный компонент при помощи свойства. Внутри функции render, устанавливаем headerProp и contentProp, которые используются в дочерних компонентах.

App.jsx

import React from 'react';

class App extends React.Component {
   constructor(props) {
      super(props);
      
      this.state = {
         header: "Header from props...",
         "content": "Content from props..."
      }
   }
   
   render() {
      return (
         <div>
            <Header headerProp = {this.state.header}/>
            <Content contentProp = {this.state.content}/>
         </div>
      );
   }
}

class Header extends React.Component {
   render() {
      return (
         <div>
            <h1>{this.props.headerProp}</h1>
         </div>
      );
   }
}

class Content extends React.Component {
   render() {
      return (
         <div>
            <h2>{this.props.contentProp}</h2>
         </div>
      );
   }
}

export default App;

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App/>, document.getElementById('app'));

Результат снова будет таким же, как и в двух предыдущих примерах, единственное отличие - источник данных - state. Если нам нужно обновить данные, просто обновляем состояние, соответственно все дочерние компоненты будут обновлены. Подробнее об этом мы поговорим в одной из следующих глав про React события.

react свойства

React валидация props

Валидация свойств, хороший способ заставить приложение правильно использовать компоненты. В дальнейшем, как только ваше приложение станет более объемным, это поможет в процессе разработки избежать ошибок и проблем. Также благодаря валидации, код становится более удобным для чтения, так как сразу же видно, как следует использовать каждый компонент.

В этом примере мы создадим компонент App со всеми необходимыми свойствами. App.propTypes используется для проверки свойств. Если некоторые из свойств используют не тот тип данных которые мы назначили, мы получим предупреждение в консоли. После определения шаблона проверки, устанавливаем App.defaultProps.

App.jsx

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            <h3>Array: {this.props.propArray}</h3>
            <h3>Bool: {this.props.propBool ? "True..." : "False..."}</h3>
            <h3>Func: {this.props.propFunc(3)}</h3>
            <h3>Number: {this.props.propNumber}</h3>
            <h3>String: {this.props.propString}</h3>
            <h3>Object: {this.props.propObject.objectName1}</h3>
            <h3>Object: {this.props.propObject.objectName2}</h3>
            <h3>Object: {this.props.propObject.objectName3}</h3>
         </div>
      );
   }
}

App.propTypes = {
   propArray: React.PropTypes.array.isRequired,
   propBool: React.PropTypes.bool.isRequired,
   propFunc: React.PropTypes.func,
   propNumber: React.PropTypes.number,
   propString: React.PropTypes.string,
   propObject: React.PropTypes.object
}

App.defaultProps = {
   propArray: [1,2,3,4,5],
   propBool: true,
   propFunc: function(e){return e},
   propNumber: 1,
   propString: "String value...",
   
   propObject: {
      objectName1:"objectValue1",
      objectName2: "objectValue2",
      objectName3: "objectValue3"
   }
}

export default App;

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App/>, document.getElementById('app'));

Поскольку все свойства правильные, получаем следующий результат:

react валидация свойств

Обратите внимание, что мы используем isRequired при проверке propArray и propBool. Если одно из этих свойств не существует, появится сообщение об ошибке. Если удалить propArray: [1,2,3,4,5] у объекта App.defaultProps, консоль выдаст предупреждение.

react консоль

Если мы установим значение propArray: 1, React предупреждает нас, что проверка propType не удалась, так как необходим массив, а получили число.

react ошибка

Перевод статьи ReactJS - Props Validation

Тэги: react.js

Вход

Уважаемый пользователь! Мы обнаружили, что вы используете AdBlock и вынуждены скрыть часть материалов на нашем сайте. Siteacademy существует и развивается за счет доходов от рекламы. Просим внести наш сайт в список исключений или отключить Блокировщик рекламы на нашем сайте.