JS: React → Props

Компонент Card, который мы писали ранее, на практике бесполезен, так как не позволяет поменять тексты. А создавать на каждый конкретный блок Card свой собственный компонент — не самая хорошая идея. Я уже не говорю о том, что чаще всего такое просто невозможно, ведь данные подставляются динамически.

Передавать данные в компоненты можно, и делается это с помощью механизма props:

See the Pen js_react_props by Hexlet (@hexlet) on CodePen.

Как видно, снаружи свойства передаются как аттрибуты в html, а внутри компонента доступны по свойству (то же самое слово, но обозначает другое) props объекта. Причем такая передача свойств для нас уже не в новинку. Встроенные компоненты точно так же принимают на вход свойства, такие как className и другие.

const vdom = <div className="row">
  <div className="col-6">
    <HelloMessage name="Kate" />
  </div>
  <div className="col-6">
    <HelloMessage name="Mark" />
  </div>
</div>;

Props — очень простой механизм передачи данных в компоненты, который, как правило, не вызывает никаких сложностей. Главное что нужно запомнить при работе с props: их нельзя изменять. Во-первых, из-за принципа работы Реакта это просто ни к чему не приведет, во-вторых, для работы с изменяемым состоянием в Реакте предусмотрен совершенно другой механизм, который мы рассмотрим позже.

Spread

Работая с props, нередко приходится передавать множество параметров, либо эти параметры присутствуют в коде в виде объекта. В таком случае можно упростить передачу используя механизм spread.

const params = {
  className: 'row',
  title: 'name',
}
const name = 'Eva';
const vdom = <div id="container" {...params}>
  Hello, {name}
</div>;

Код выше эквивалентен следующему примеру:

const name = 'Eva';
const vdom = <div id="container" className="row" title="name">
  Hello, {name}
</div>;

Default props

Другая задача, с которой сталкиваются разработчики - установка значений по умолчанию для props. Проще всего устанавливать их прямо внутри функции render используя такой подход:

const title = this.props.title || 'hi!';

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

В реакте предусмотрен способ устанавливать значения props по умолчанию. Пример:

class Header extends React.Component {
  static defaultProps = {
    text: 'Hello, world!',
  };

  render() {
    return (
      <h1>{this.props.text}</h1>
    );
  }
}