React и TypeScript: Практическое руководство. Быстрый старт. Ирина Кириченко

Чтение книги онлайн.

СКАЧАТЬ родительского компонента. Props передаются компоненту в виде атрибутов и становятся доступными внутри компонента, как свойства.

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

      Пример: Если у вас есть компонент «Кнопка», то пропс может содержать информацию о том, какой текст должен отображаться на кнопке. Вы передаете этот текст в компонент, и компонент использует его для отображения на кнопке.

      Преимущества использования props:

      – Расширяемость. Props являются расширяемым и удобным способом передачи данных в компоненты, особенно, когда у вас есть множество разных пропсов. При использовании props вы также можете определить значения по умолчанию и лучше структурировать ваш компонент.

      Пример:

      function UserProfile (props) {

          return (

            <div>

              <p> Name: {props.name} </p>

              <p> Age: {props.age} </p>

              {/* Другие свойства */}

            </div>

      )

      }

      – Читаемость кода. Передача данных через props делает компонент более читаемым, так как вы видите, какие данные он использует, необходимо только взглянуть на его декларацию.

      – Значения по умолчанию: Вы можете задать значения по умолчанию для props, что полезно, если некоторые данные не передаются. Например, если props.age не был передан, вы можете использовать значение по умолчанию.

      Пример:

      function UserProfile (props) {

          const age = props.age || 25 // Значение по умолчанию

          return (

            <div>

              <p> Name: {props.name} </p>

              <p> Age: {age} </p>

            </div>

      )

      }

      Хотя слово «props» является стандартным и широко используется в сообществе React, вы можете использовать любое другое слово в качестве аргумента функции компонента. Это полностью зависит от вас и вашего стиля кодирования.

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

      Пример с использованием другого имени для аргумента:

      function PersonInfo (data) {

          return (

            <div>

              <p> Имя: {data.name} </p>

              <p> Возраст: {data.age} </p>

            </div>

      )

      }

      При использовании компонента:

      <PersonInfo name=«Алиса» age= {30} />

      Стоит помнить, что использование слова «props» для аргумента функции компонента – это стандартная практика в сообществе React, и она СКАЧАТЬ