Реагировать Учебник

Реагировать Главная Реагировать Введение Реагировать Начать Реагировать ES6 Реагировать на визуализацию HTML Реагировать JSX Реагировать Компоненты Реагировать на класс Реагировать на реквизиты Реагировать на события Реагировать на условия Реагировать списки Реагировать на формы Реактивный маршрутизатор Реагировать на заметку Реагировать на стили CSS Реагировать на стиль Sass

Реагировать на крючки

Что такое крючок? использование состояния использованиеЭффект использованиеконтекста useRef использованиередьюсер использоватьОбратный звонок useMemo Пользовательские крючки

Упражнения по реагированию

Ответная викторина Упражнения по реагированию Сертификат реакции

Реагировать на реквизиты


Реквизиты — это аргументы, передаваемые компонентам React.

Реквизиты передаются компонентам через атрибуты HTML.

props обозначает свойства.


Реагировать на реквизиты

Реквизиты React похожи на аргументы функций в JavaScript и атрибуты в HTML.

Чтобы отправить свойства в компонент, используйте тот же синтаксис, что и атрибуты HTML:

Пример

Добавьте атрибут «бренд» к элементу «Автомобиль»:

const myelement = <Car brand="Ford" />;

Компонент получает аргумент как propsобъект:

Пример

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

function Car(props) {
  return <h2>I am a { props.brand }!</h2>;
}


w3schools CERTIFIED . 2022

Получите сертификат!

Завершите модули React, выполните упражнения, сдайте экзамен и получите сертификат w3schools!!

ЗАПИСАТЬСЯ НА 95 $

Передать данные

Реквизиты также позволяют передавать данные из одного компонента в другой в виде параметров.

Пример

Отправьте свойство brand из компонента Garage в компонент Car:

function Car(props) {
  return <h2>I am a { props.brand }!</h2>;
}

function Garage() {
  return (
    <>
      <h1>Who lives in my garage?</h1>
      <Car brand="Ford" />
    </>
  );
}

ReactDOM.render(<Garage />, document.getElementById('root'));

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

Пример

Создайте переменную с именем carNameи отправьте ее Carкомпоненту:

function Car(props) {
  return <h2>I am a { props.brand }!</h2>;
}

function Garage() {
  const carName = "Ford";
  return (
    <>
      <h1>Who lives in my garage?</h1>
      <Car brand={ carName } />
    </>
  );
}

ReactDOM.render(<Garage />, document.getElementById('root'));

Или, если это был объект:

Пример

Создайте объект с именем carInfoи отправьте его Carкомпоненту:

function Car(props) {
  return <h2>I am a { props.brand.model }!</h2>;
}

function Garage() {
  const carInfo = { name: "Ford", model: "Mustang" };
  return (
    <>
      <h1>Who lives in my garage?</h1>
      <Car brand={ carInfo } />
    </>
  );
}

ReactDOM.render(<Garage />, document.getElementById('root'));

Примечание. Реквизиты React доступны только для чтения! Вы получите сообщение об ошибке, если попытаетесь изменить их значение.


Проверьте себя с помощью упражнений

Упражнение:

Создайте переменную с именем name и передайте ее компоненту Message.

function Person(props) {
  return <h2>I'm { props.name }!</h2>;
}

function Greeting() {
  const name = "Jesse"
  return (
    <>
      <h1>Hello!</h1>
      <Person name= name  />
    </>
  );
}

ReactDOM.render(<Greeting />, document.getElementById('root'));