компонентов

Автор выбрал Creative Commons для получения пожертвования в рамках программы Write for DOnations.

Введение

В этом руководстве вы создадите пользовательские компоненты, передавая свойства в ваш компонент. Свойства — это аргументы, которые вы предоставляете элементу JSX. Они выглядят как стандартные HTML-свойства, но не являются предопределенными и могут использовать несколько типов данных JavaScript, включая числа, строки, функции, массивы и даже другие компоненты React. Ваши пользовательские компоненты могут использовать свойства для отображения данных или использования этих данных, чтобы сделать компоненты интерактивным. Свойства — это ключ к созданию компонентов, которые можно легко адаптировать под разные ситуации, а их знание даст вам инструменты для разработки пользовательских компонентов, которые могут обрабатывать уникальные ситуации.

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

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

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

Предварительные требования

Шаг 1 — Создание пустого проекта

На этом шаге мы создадим новый проект, используя Create React App. Затем вы удалите пример проекта и связанные файлы, которые устанавливаются при инициализации проекта. В заключение вы создадите простую структуру файлов для организации ваших компонентов.

Создайте новый проект. В командной строке запустите следующий скрипт для установки нового проекта с помощью create-react-app:

npx create-react-app prop-tutorial

После завершения создания проекта перейдите в его директорию:

В новой вкладке или окне терминала запустите проект, используя скрипт start Create React App​​​. Браузер будет выполнять автообновление при изменениях, поэтому вы должны оставить этот скрипт работающим все время при работе:

Вы получите запущенный локальный сервер. Если проект не был открыт в браузере, вы можете открыть его, перейдя на страницу http://localhost:3000/. Если вы запустили приложение на удаленном сервере, воспользуйтесь адресом http://your_IP_address:3000.

Ваш браузер загрузит простое приложение React в качестве элемента Create React App:

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

Откройте src/App.js в текстовом редакторе. Это корневой компонент, который встраивается в страницу. Все компоненты будут запускаться отсюда. Дополнительную информацию об App.js можно найти в статье Настройка проекта React с помощью Create React App.

Откройте src/App.js с помощью следующей команды:

Вы увидите следующий файл:

prop-tutorial/src/App.js

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

Удалите строку import logo from './logo.svg';​​. Затем замените весь код оператора return, который должен возвращать набор пустых тегов: <></>​​​. В результате вы получите страницу валидации, которая ничего не возвращает. Окончательный код будет выглядеть следующим образом:

prop-tutorial/src/App.js

import React from 'react';
import './App.css';

function App() {
  return <></>;
}

export default App;

Сохраните изменения и закройте текстовый редактор.

В заключение удалите логотип. Вы не будете использовать ее в вашем приложении. Кроме того, вам нужно удалить неиспользуемые файлы, которые не пригодятся вам в работе. Это позволит вам избежать путаницы в будущем.

В окне терминала введите следующую команду:

Если вы откроете ваш браузер, то увидите пустой экран.

Теперь, когда вы успешно очистили пример проекта Create React App, создайте простую структуру файлов. Это позволит вам поддерживать ваши компоненты изолированными и независимыми.

Создайте каталог с именем components в каталоге src. В нем будут храниться все ваши пользовательские компоненты.

Каждый компонент будет иметь собственный каталог для хранения файла компонента, а также стилей, изображений, если таковые имеются, и тестов.

Создайте каталог для App:

Переместите все файлы App в этот каталог. Используйте подстановочный символ * для выбора любых файлов, начинающихся с App. вне зависимости от их расширения. Затем используйте команду mv для их отправки в новый каталог.

mv src/App.* src/components/App

В заключение обновите относительный путь импорта в index.js, который представляет собой корневой компонент и инициализирует весь процесс.

Оператор импорта должен указывать на файл App.js в каталоге App, поэтому необходимо внести следующее изменение:

prop-tutorial/src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './components/App/App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

Сохраните и закройте файл.

Теперь, когда проект настроен, вы можете создать ваш первый компонент.

Шаг 2 — Настройка динамических компонентов со свойствами

На этом шаге вы создадите компонент, который будет изменяться на основе передаваемой информации, т.е. свойств. Свойства — это аргументы, которые вы передаете функции или классу, но так как ваши компоненты трансформируются в HTML-объекты с JSX, вы будете передавать свойства в виде HTML-атрибутов. В отличие от HTML-элементов, вы можете передавать множество разных типов данных, от строк до массивов, объектов и даже функций.

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

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

Добавление данных

Во-первых, вам потребуются шаблонные данные. Создайте файл в каталоге src/App с именем data.

touch src/components/App/data.js

Откройте новый файл в текстовом редакторе:

nano src/components/App/data.js

Далее добавьте массив объектов, который вы будете использовать в качестве примера данных:

prop-tutorial/src/components/App/data.js

export default [
  {
    name: 'Lion',
    scientificName: 'Panthero leo',
    size: 140,
    diet: ['meat'],
  },
  {
    name: 'Gorilla',
    scientificName: 'Gorilla beringei',
    size: 205,
    diet: ['plants', 'insects'],
    additional: {
      notes: 'This is the eastern gorilla. There is also a western gorilla that is a different species.'
    }
  },
  {
    name: 'Zebra',
    scientificName: 'Equus quagga',
    size: 322,
    diet: ['plants'],
    additional: {
      notes: 'There are three different species of zebra.',
      link: 'https://en.wikipedia.org/wiki/Zebra'
    }
  }
]

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

Сохраните и закройте файл.

Создание компонентов

Затем создайте временный компонент AnimalCard. Этот компонент будет получать свойства и отображать данные.

Сначала создайте каталог в src/components​​​ с названием AnimalCard, а затем файл с именем src/components/AnimalCard/AnimalCard.js и CSS-файл с именем src/components/AnimalCard/AnimalCard.css.

mkdir src/components/AnimalCard
touch src/components/AnimalCard/AnimalCard.js
touch src/components/AnimalCard/AnimalCard.css

Откройте AnimalCard.js​​​ в текстовом редакторе:

nano src/components/AnimalCard/AnimalCard.js

Добавьте базовый компонент, который импортирует CSS и возвращает тег <h2>.

prop-tutorial/src/components/AnimalCard/AnimalCard.js

import React from 'react';
import './AnimalCard.css'

export default function AnimalCard() {
  return <h2>Animal</h2>
}

Сохраните и закройте файл. Теперь вам нужно импортировать данные и компонент в базовый компонент App.

Откройте src/components/App/App.js​​​:

nano src/components/App/App.js

Импортируйте данные и компонент, а затем пройдите по данным, возвращая компонент для каждого элемента в массиве:

prop-tutorial/src/components/App/App.js

import React from 'react';
import data from './data';
import AnimalCard from '../AnimalCard/AnimalCard';
import './App.css';

function App() {
  return (
    <div className="wrapper">
      <h1>Animals</h1>
      {data.map(animal => (
        <AnimalCard key={animal.name}/>
      ))}
    </div>
  )
}

export default App;

Сохраните и закройте файл. Здесь вы используете метод массива .map() для итерации по данным. Кроме добавления цикла у вас также имеется оборачивающий div с классом, который вы будете использовать для стилей, и тег <h1> для наименования вашего проекта.

После сохранения данных и перезагрузки браузера вы увидите наименование для каждой карточки.

Далее добавьте несколько стилей для выравнивания элементов. Откройте App.css:

nano src/components/App/App.css

Замените его содержимое на следующее для организации элементов:

prop-tutorial/src/components/App/App.css

.wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 20px;
}

.wrapper h1 {
    text-align: center;
    width: 100%;
}

Здесь используется flexbox для приведения в порядок данных и их выравнивания. padding добавляет некоторое пространство в окне браузера. justify-content будет обеспечивать дополнительное пространство между элементами, а .wrapper h1​​​ будет размещать заголовок Animal на всю его длину.

Сохраните и закройте файл. Когда вы сделаете это и обновите браузер, то увидите, что между данными теперь есть определенное свободное пространство.

Добавление свойств

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

Откройте App.js:

nano src/components/App/App.js

Добавьте свойство name в AnimalCard.

prop-tutorial/src/components/App/App.js

import React from 'react';
...
function App() {
  return (
    <div className="wrapper">
      <h1>Animals</h1>
      {data.map(animal => (
        <AnimalCard
          key={animal.name}
          name={animal.name}
        />
      ))}
    </div>
  )
}

export default App;

Сохраните и закройте файл. Свойство name выглядит как стандартный HTML-атрибут, но вместо строки вы передаете свойство name объекта animal в фигурных скобках.

Теперь, когда вы передали одно свойство в новый компонент, необходимо использовать его. Откройте AnimalCard.js:

nano src/components/AnimalCard/AnimalCard.js

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

prop-tutorial/src/components/AnimalCard/AnimalCard.js

import React from 'react';
import './AnimalCard.css'

export default function AnimalCard(props) {
  const { name } = props;
  return (
    <h2>{name}</h2>
  );
}

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

После деструктурирования объекта вы можете использовать отдельные элементы данных. В данном случае вы будете использовать заголовок в теге <h2>, включающий значение в фигурных скобках, чтобы React мог использовать его в качестве JavaScript.

Также вы можете использовать свойство в объекте prop, используя запись через точку. В качестве примера вы можете создать элемент <h2>​​​ следующим образом: <h2>{props.title}</h2>​​​. Преимущество деструктурирования состоит в том, что вы можете собирать неиспользуемые свойства и использовать оператор rest объекта.

Сохраните и закройте файл. Сделав это и перезагрузив браузер, вы увидите конкретное имя для каждого животного вместо заполнителя.

Свойство name представляет собой строку, но строка может быть любым типом данных, который вы можете передавать функции JavaScript. Чтобы посмотреть, как это работает, добавьте остальные данные.

Откройте файл App.js:

nano src/components/App/App.js

Добавьте свойство для каждого из следующих элементов: scientificName, size, diet и additional. Они сдержат строки, целые числа, массивы и объекты.

prop-tutorial/src/components/App/App.js

import React from 'react';
...

function App() {
  return (
    <div className="wrapper">
      <h1>Animals</h1>
      {albums.map(album => (
        <AnimalCard
          additional={animal.additional}
          diet={animal.diet}
          key={animal.name}
          name={animal.name}
          scientificName={animal.scientificName}
          size={animal.size}
        />
      ))}
    </div>
  )
}

export default App;

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

Сохраните и закройте файл. Откройте AnimalCard.js.

nano src/components/AnimalCard/AnimalCard.js

На этот раз выполните деструктуризацию свойств списка параметров функции и используйте данные в компоненте:

prop-tutorial/src/components/AnimalCard/AnimalCard.js

import React from 'react';
import './AnimalCard.css'

export default function AnimalCard({
  additional,
  diet,
  name,
  scientificName,
  size
}) {
  return (
    <div>
      <h2>{name}</h2>
      <h3>{scientificName}</h3>
      <h4>{size}kg</h4>
      <div>{diet.join(', ')}.</div>
    </div>
  );
}

После получения данных вы можете добавить scientificName и size в теги заголовка, но вам нужно превратить массив в строку, чтобы React мог отобразить их на странице. Вы можете сделать это с помощью join(', '), который будет создавать разделенный запятой список.

Сохраните и закройте файл. Сделав это и обновив браузер, вы увидите структурированные данные.

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

Откройте App.js:

nano src/components/App/App.js

Создайте функцию showAdditionalData, которая будет конвертировать объект в строку и отображать ее в качестве оповещения.

prop-tutorial/src/components/App/App.js

import React from 'react';
...

function showAdditional(additional) {
  const alertInformation = Object.entries(additional)
    .map(information => `${information[0]}: ${information[1]}`)
    .join('n');
  alert(alertInformation)
};

function App() {
  return (
    <div className="wrapper">
      <h1>Animals</h1>
      {data.map(animal => (
        <AnimalCard
          additional={animal.additional}
          diet={animal.diet}
          key={animal.name}
          name={animal.name}
          scientificName={animal.scientificName}
          showAdditional={showAdditional}
          size={animal.size}
        />
      ))}
    </div>
  )
}

export default App;

Функция showAdditional конвертирует объект в массив пар, где первый элемент — это ключ, а второй — значение. Затем она преобразовывает данные, конвертируя пару ключей в строку. После этого функция добавляет разделитель строки n, прежде чем передавать полную строку в сигнальную функцию.

Поскольку JavaScript может принимать функции в качестве аргументов, React также может принимать функции в качестве свойств. Поэтому вы можете передать showAdditional в AnimalCard в качестве свойства с именем showAdditional.

Сохраните и закройте файл. Откройте AnimalCard:

nano src/components/AnimalCard/AnimalCard.js

Извлеките функцию showAdditional из объекта свойства, затем создайте <button> с событием onClick, которое вызывает функцию с объектом additional:

prop-tutorial/src/components/AnimalCard/AnimalCard.js

import React from 'react';
import './AnimalCard.css'

export default function AnimalCard({
  additional,
  diet,
  name,
  scientificName,
  showAdditional,
  size
}) {
  return (
    <div>
      <h2>{name}</h2>
      <h3>{scientificName}</h3>
      <h4>{size}kg</h4>
      <div>{diet.join(', ')}.</div>
      <button onClick={() => showAdditional(additional)}>More Info</button>
    </div>
  );
}

Сохраните файл. Сделав это и обновив браузер, вы увидите кнопку после каждой карточки. При нажатии на кнопку, вы получите оповещение с дополнительными данными.

Если вы попробуете нажать More Info для карточки Lion, то получите ошибку. Это связано с тем, что для льва дополнительные данные отсутствуют. Вы увидите, как исправить это, в шаге 3.

В заключение давайте добавим немного оформления в наш проект. Добавьте className для animal-wrapper в div в AnimalCard:

prop-tutorial/src/components/AnimalCard/AnimalCard.js

import React from 'react';
import './AnimalCard.css'

export default function AnimalCard({
...
  return (
    <div className="animal-wrapper">
...
    </div>
  )
}

Сохраните и закройте файл. Откройте AnimalCard.css:

nano src/components/AnimalCard/AnimalCard.css

Добавьте CSS для добавления тонкой границы и отступа для карточек и кнопки:

prop-tutorial/src/components/AnimalCard/AnimalCard.css

.animal-wrapper {
    border: solid black 1px;
    margin: 10px;
    padding: 10px;
    width: 200px;
}

.animal-wrapper button {
    font-size: 1em;
    border: solid black 1px;
    padding: 10;
    background: none;
    cursor: pointer;
    margin: 10px 0;
}

Это код CSS добавит небольшую границу для карточки и заменит стиль кнопки, используемый по умолчанию, на границу и отступ. cursor: pointer​​​ будет менять курсор при наведении на кнопку.

Сохраните и закройте файл. После выполнения этих действий и обновления браузера вы увидите данные в отдельных карточках.

На данный момент вы создали два пользовательских компонента. Вы передали данные второму компоненту из первого компонента, используя свойства. Свойства включают разные данные, такие как строки, целые числа, массивы, объекты и функции. В вашем втором компоненте вы использовали свойства для создания динамического компонента с помощью JSX.

В следующем шаге вы будете использовать типизированную систему prop-types для указания структуры, которую ваш компонент ожидает увидеть, что будет обеспечивать предсказуемость в приложении и предотвращать ошибки.

Шаг 3 — Создание предсказуемых свойств с помощью PropTypes и defaultProps

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

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

Пакет prop-types устанавливается вместе с Create React App, поэтому для его использования необходимо только импортировать его в ваш компонент.

Откройте AnimalCard.js:

nano src/components/AnimalCard/AnimalCard.js

Затем импортируйте PropTypes из prop-types:

prop-tutorial/src/components/AnimalCard/AnimalCard.js

import React from 'react';
import PropTypes from 'prop-types';
import './AnimalCard.css'

export default function AnimalCard({
...
}

Добавьте PropTypes прямо в функцию компонента. В JavaScript функции являются объектами, что означает, что вы можете добавить свойства, используя точечный синтаксис. Добавьте следующие PropTypes в AnimalCard.js:

prop-tutorial/src/components/AnimalCard/AnimalCard.js

import React from 'react';
import PropTypes from 'prop-types';
import './AnimalCard.css'

export default function AnimalCard({
...
}

AnimalCard.propTypes = {
  additional: PropTypes.shape({
    link: PropTypes.string,
    notes: PropTypes.string
  }),
  diet: PropTypes.arrayOf(PropTypes.string).isRequired,
  name: PropTypes.string.isRequired,
  scientificName: PropTypes.string.isRequired,
  showAdditional: PropTypes.func.isRequired,
  size: PropTypes.number.isRequired,
}

Сохраните и закройте файл.

Как видите, существует множество разных PropTypes. Это только небольшой пример; изучите официальную документацию React, чтобы узнать об остальных типах, которые вы можете использовать.

Давайте начнем со свойства name. Здесь вы указываете, что в name должна находиться строка. Свойство scientificName аналогично предыдущему примеру. size — число, которое может включать как числа с плавающей точкой, например, 1.5, так и целые числа, например 6. showAdditional — это функция (func).

diet же имеет определенные отличия. В данном случае вы указываете, что diet представляет собой массив, но вам также необходимо указать, что будет содержать этот массив. В нашем случае массив будет содержать только строки. Если вы хотите смешивать типы, то можете использовать другое свойство oneOfType, которое принимает массив валидных значений PropTypes. Вы можете использовать oneOfType где угодно, так что если вы хотите, чтобы size принимал числа или строки, внесите следующие изменения:

size: PropTypes.oneOfType([PropTypes.number, PropTypes.string])

Свойство additional также немного более сложное. В этом случае вы указываете объект, но, чтобы внести большую ясность, вы указываете, что должен содержать объект. Для этого вы можете использовать PropTypes.shape, принимающий объект с дополнительными полями, которым требуются собственные значения PropTypes. В нашем случае link и notes имеют значение PropTypes.string.

В настоящее время все данные имеют правильную форму и отвечают свойствам. Чтобы узнать, что произойдет, если значение PropTypes не будет совпадать, откройте ваши данные:

nano src/components/App/data.js

Измените для size значение на строку в первом элементе:

prop-tutorial/src/components/App/data.js

export default [
  {
    name: 'Lion',
    scientificName: 'Panthero leo',
    size: '140',
    diet: ['meat'],
  },
...
]

Сохраните файл. После выполнения этих действий и обновления браузера вы увидите ошибку в консоли.

Error
index.js:1 Warning: Failed prop type: Invalid prop `size` of type `string` supplied to `AnimalCard`, expected `number`.
    in AnimalCard (at App.js:18)
    in App (at src/index.js:9)
    in StrictMode (at src/index.js:8)

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

Измените данные обратно на правильный тип:

prop-tutorial/src/components/App/data.js

export default [
  {
    name: 'Lion',
    scientificName: 'Panthero leo',
    size: 140,
    diet: ['meat'],
  },
...
]

Сохраните и закройте файл.

Откройте AnimalCard.js:

nano src/components/AnimalCard/AnimalCard.js

Каждое свойство, за исключением additional, имеет параметр isRequired. Это означает, что они должны быть обязательно указаны. Если вы не укажете обязательное свойство, код все равно скомпилируется, но вы получите ошибку исполнения в консоли.

Если свойство не обязательное, вы можете добавить значение по умолчанию. Рекомендуется всегда добавлять значение по умолчанию для предотвращения ошибок при исполнении, если свойство не обязательное. Например, в компоненте AnimalCard вы вызываете функцию с данными additional. Если их там нет, функция попытается получить их и изменить несуществующий объект, в результате чего приложение упадет.

Чтобы предотвратить эту проблему, добавьте значение defaultProp для additional:

prop-tutorial/src/components/AnimalCard/AnimalCard.js

import React from 'react';
import PropTypes from 'prop-types';
import './AnimalCard.css'

export default function AnimalCard({
...
}

AnimalCard.propTypes = {
  additional: PropTypes.shape({
    link: PropTypes.string,
    notes: PropTypes.string
  }),
...
}

AnimalCard.defaultProps = {
  additional: {
    notes: 'No Additional Information'
  }
}

Вы добавляете значение defaultProps в функцию, используя точечный синтаксис, как вы это делали для propTypes, затем вы добавляете значение по умолчанию, которое компонент должен использовать, если свойство не определено. В нашем случае вы подставляете форму additional, включая сообщение, которое не содержит дополнительной информации.

Сохраните и закройте файл. После этого обновите браузер. После обновления страницы нажмите кнопку More Info​​​ карточки Lion. У нее нет поля additional в данных, поэтому свойство не определено. Но AnimalCard будет заменять свойство по умолчанию.

Теперь ваши свойства хорошо задокументированы и являются либо обязательными, либо имеют значение по умолчанию для обеспечения предсказуемого кода. Это позволит будущим разработчикам (в том числе вам) понимать, какие свойства требуются компоненту. Это облегчит повторное использование ваших компонентов, предоставляя вам полную информацию о том, как компонент будет использовать данные, которые он получает.

Заключение

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

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