React Props: основы

Вы когда-нибудь видели слово «реквизит» в React, возможно, переданное в функцию? Вы когда-нибудь задумывались, что это значит? Из-за неотъемлемой важности этого объекта в приложениях React важно понимать, почему и как используются свойства и состояние.

Если вас смущает реквизит, вы не одиноки! Многие из нас просто привыкли видеть, что реквизит передаётся в определённые моменты, и почти подсознательно соглашаются с этим. Надеюсь, это базовое руководство поможет прояснить, почему и как используются реквизиты React.

Что такое React Props?

Свойства React («свойства») используются как способ передачи данных от одного компонента (родительский компонент) к другому (дочернему компоненту). Свойства неизменяемы, что означает, что вы не можете изменить свойства, передаваемые компоненту изнутри компонента. Компоненты получают данные от других компонентов с помощью свойств. Реквизиты, полученные от другого компонента, не могут быть изменены.

Синтаксис реквизита

Вот базовый пример файла index.js, показывающий реквизиты, передаваемые в качестве аргумента:

// Основные операторы импорта React

import React from ‘react’;
import ReactDOM from ‘react-dom’;

// Компонент фильма с функцией рендеринга

class Movie extends React.Component {
render() {
return <h2>Tonight we’ll watch {this.props.title} !</h2>
}
}

Обратите внимание, что мы ещё не присвоили свойству title значение. Мы сделаем это в следующей строке:

// имя постоянной переменной «myelement»

const myelement = <Movie title=»Casablanca» />;

Здесь мы просим наш компонент «Movie» отобразить (с помощью <… />) со значением «Casablanca», присвоенным свойству с именем «title».

// Оператор React для рендеринга «myelement» в HTML-элемент с идентификатором «root».

ReactDOM.render(myelement, document.getElementById(‘root’));

«Сегодня вечером мы посмотрим Касабланку!» будет отображаться.

Отправка Props в конструктор и в super ()

Возможно, вы видели реквизиты, передаваемые в функции конструктора, а также в super (), и были очень (каламбур) не понимали, почему. Вот упрощённый пример:

class Computer extends React.Component{
constructor(props){
super(props); //we passed in props to super()
console.log(props);
console.log(this.props);
}

Почему мы вызываем super и зачем передавать ему или конструктору реквизиты? Super относится к конструктору родительского класса. Если у вас был значительный опыт программирования, вы уже имели дело с конструкторами. Наш компонент класса «Компьютер» расширяется (другими словами, он построен с использованием) базового компонента React (как вы можете видеть в первой строке).

Итак, выше мы инициализируем this.props компонента React. Если бы мы не передали props в super (), последний оператор console.log вернулся бы как undefined. По сути, внутри конструктора вы не можете использовать this, если не используете super (props). Если бы этот последний оператор console.log был написан до super (props), он не работал бы.

Даже если вы не вызовете super (), вы все равно сможете получить доступ к this.props в других частях вашего компонента. Это связано с тем, что за кулисами React назначает this.props после запуска конструктора. Проблема в том, что вы хотите вызвать метод из самого конструктора. Кодеры включают super (props) для удобства сопровождения кода. Ваш код может измениться в будущем, и вы должны быть готовы к этому. Давайте посмотрим на следующий код, в котором у нас есть компонент класса «Человек» со свойством («имя»):

class Friend{
constructor(name){
this.name=name;
}
}

Добавим класс GoodFriend, расширяющий Friend:

class GoodFriend extends Friend{
constructor(name){
this.complimentYou(); //you shouldn’t do this before super()!
super(name);
}

// определение функции «комплиментYou», которую мы вызвали выше:

complimentYou() {
alert(‘You look nice today’); // an alert that shows up on your screen
}
}

Вышеуказанное работает нормально. Однако, если позже вы захотите использовать имя и добавить

alert(‘Compliment brought to you by your friend ‘+ this.name);

С функцией compmentYou () вы столкнётесь с проблемой: функция вызывается в конструкторе до того, как мы использовали super (name) для настройки родительского («Друга») this.name, поэтому она не будет работать. Вот почему люди вызывают super () и передают реквизиты!

Отправка реквизита в компонент

Вот способ отправки реквизита в компонент:

Сначала определите пару атрибут / значение, которую вы хотите отправить в компонент:

const elementToAdd = <Band name=»Velvet Underground» />;

Затем передайте аргумент, который вы определили на первом шаге, компоненту как объект props:

class Band extends React.Component {
render(){
return <h1> The band name is {this.props.name}. </h1>;
}
}
ReactDOM.render(elementToAdd, document.getElementById(‘root’));

Передача данных другому компоненту с помощью свойств

Вы можете отправлять данные через props в другой компонент. Причина для этого — чистота кода. В конце концов, React — это разбиение вещей на многоразовые, управляемые разделы. Давайте посмотрим на этот пример, в котором мы передаём значение имени.

Функция render () компонента Band возвращает значение свойства с именем «name» (мы дадим ему значение в следующем компоненте!) Вместе со строкой «from New York City!»:

class Band extends React.Component {
render() {
return <h3> {this.props.name} from New York City! </h3>;
}
}

Функция render () компонента Venue возвращает заголовок «Band Playing Today:». Под ним мы видим, что наш компонент «Band», который мы написали выше, вызывается для рендеринга; «Name» присваивается значение «Velvet Underground»:

class Venue extends React.Component {
render() {
return (
<div>
<h1>Band Playing Today:</h1>
<Band name=»Velvet Underground» />
</div>
);
}
}

ReactDOM.render(<Venue />, document.getElementById(‘root’));

Теперь заголовок «Группа играет сегодня» будет отображаться вместе с заголовком «Velvet Underground из Нью-Йорка!» В последней строке мы вызвали только компонент для рендеринга, поскольку «площадка» уже будет отображать наш компонент «группа».

Точно так же вы можете передавать другие формы данных.

Пример раздела доски судоку с реквизитом

Представьте, что у вас есть доска для игры в судоку, которую вы хотите создать с помощью React. Он состоит из девяти квадратных секций размером три на три. Давайте сосредоточимся на одном из этих квадратных участков размером три на три. По сути, это квадратная доска, состоящая из девяти меньших квадратов, и у каждого квадрата есть номер.

Сначала вы создаёте класс «Square» с методом render (), который вернёт кнопку. В вашем файле CSS вы превращаете его в квадратную форму, используя className, которое мы связали с кнопкой, чтобы вы могли ссылаться на него. А также обратите внимание, что содержимое кнопки (то, что отображается внутри кнопки) в настоящее время присвоено {this.props.value}, но «значение» ещё не определено:

class Square extends React.Component {
render() {
return (
<button className=»smallSquare»>
{this.props.value}
</button>
);
}
}

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

Мы добавляем заголовок компонента и функцию, которую назовём «showSquare». Посмотрите на оператор return функции. Он вызывает наш компонент Square и устанавливает его значение в «i» (помните, что мы не присваивали значение свойству «value» в нашем компоненте Square).

class Board extends React.Component {
showSquare(i) {
return <Square value={i} />;
}

Теперь, когда у нас есть функция, которая будет использовать класс square и вводить значение «i», давайте воспользуемся этим в функции рендеринга, чтобы показать желаемую доску размером три на три. Мы вызовем метод renderSquare для «this» (имеется в виду этот компонент, на котором мы пишем, компонент Board), и мы передадим число в качестве аргумента («i» в нашей функции выше):

render() {
return (
<div>
<div className=»board-row»>
{this.renderSquare(9)}
{this.renderSquare(5)}
{this.renderSquare(2)}
</div>
<div className=»board-row»>
{this.renderSquare(3)}
{this.renderSquare(4)}
{this.renderSquare(1)}
</div>
<div className=»board-row»>
{this.renderSquare(6)}
{this.renderSquare(7)}
{this.renderSquare(8)}
</div>
</div>
);
}
}

Обратите внимание также на атрибут className, который я включил здесь для каждой строки. Вы, конечно, можете назвать это иначе, чем «доска-ряд»; Я включил его, чтобы напомнить вам использовать его в вашем файле CSS для форматирования квадратных строк. Это пример того, как может выглядеть раздел CSS для форматирования строки доски: