Реквизиты в React.js

Что такое реквизит и как мы на самом деле его используем? Предположим, мы все знаем о react Component, которые можно использовать повторно, то есть они могут возвращать любые JSX,, который можно включить в любую часть нашего приложения. Давайте создадим простое приложение, единственная задача которого - приветствовать пользователя по имени.

Свойства доступа в функциональном компоненте

Здесь родительским элементом является App.js, который является компонентом класса, а его дочерний элемент Welcome.js является функциональным компонентом.

//this is App.js
import React, { Component } from 'react';
import Welcome from './Welcome.jsx';
class App extends Component {
 render() {
    return (
     <div>
      <Welcome/>
      <Welcome/>
      </div>
    );
  }
}
export default App;

В App.js мы дважды обрабатываем приветствие, которое является функциональным компонентом, внутри функции return. Файл Welcome.js выглядит так:

//this is Welcome.js file
import React from 'react';
const Welcome = () => {
    return <h1>Hello Joe Goldberg</h1>
  }
export default Welcome;

Теперь, если мы настроимся на http: // localhost: 3000 /, результат должен быть таким:

Поскольку мы дважды визуализируем компонент Welcome в App.js, он дважды напечатает Джо Голдберга, возвращая внутренний текст элемента h1 из функции Welcome.

Но что, если мы хотим сделать этот компонент динамическим? Это означает, что мы хотим напечатать разные имена пользователей или приветствовать разных людей, используя один и тот же компонент. Теперь мы можем эффективно использовать свойства, также известные как свойства. Подумайте, как мы добавляем атрибуты, такие как класс CSS, в элемент HTML. Похожая идея, мы хотим добавить реквизиты к нашему компоненту в качестве их свойства или атрибута и установить его равным желаемому значению, в данном случае имени пользователя. После присвоения значений нашим реквизитам мы должны каким-то образом отправить реквизиты из App.js в Welcome.js, давайте посмотрим:

//this is App.js
import React, { Component } from 'react';
import Welcome from './Welcome.jsx';
class App extends Component {
render() {
    return (
     <div>
      <Welcome name="Joe Goldberg"/>
      <Welcome name="Mrs Maisel"/>
      </div>
    );
  }
}
export default App;

В App.js мы назвали наши реквизиты как «имя» и установили его равным желаемому имени пользователя. Теперь нам нужно передать реквизиты компоненту Добро пожаловать.

//this is Welcome.js
import React from 'react';
const Welcome = (props) => {
  //console.log(props);
    return <h1>{props.name}</h1>
  }
export default Welcome;

Обратите внимание, что App.js, который является родительским компонентом, передает реквизиты в качестве параметра в функции приветствия (стрелочная функция), которую затем можно использовать в теле функции. Если мы создадим реквизиты console.log, мы увидим, что реквизиты - это не что иное, как простой объект javascript с парами ключей и значений. Мы можем получить доступ к ключу name, используя точечную нотацию (.), Например, props.name внутри фигурных скобок, потому что это выражение JSX.

//console.log(props)
>{name: "Joe Goldberg"}
>{name: "Mrs Maisel"}

Теперь, если мы настроимся на http: // localhost: 3000 /, результат должен быть таким:

Мы успешно сделали наш компонент динамичным с помощью props!

Свойства доступа в компоненте класса

Теперь мы перестроим то же приложение, задача которого - прощаться с пользователями, используя их имя пользователя. В App.js мы дважды обрабатываем дочерний компонент Goodbye и передаем «name» в качестве свойств.

// this is App.js
import React, { Component } from 'react';
import Goodbye from './Goodbye.jsx'
class App extends Component {
 render() {
    return (
     <div>
      <Goodbye name="Joe Goldberg"/>
      <Goodbye name="Mrs Maisel"/>
      </div>
    );
  }
}
export default App;

В отличие от "Добро пожаловать", которое было функциональным компонентом, Прощай будет компонентом класса:

//this is Goodbye.js
import React, { Component } from 'react';
class Goodbye extends Component {
  render() {
    return (
      <h1>Goodbye {this.props.name}</h1>
    );
  }
}
export default Goodbye;

Обратите внимание на разницу, мы больше не отправляем реквизиты в качестве параметров. Поскольку Goodbye - это компонент класса, доступ к реквизитам будет осуществляться с помощью ключевого слова this, которое является зарезервированным словом в реакции. Теперь мы можем отобразить элемент h1 со связанным именем пользователя, используя this.props.name в фигурных скобках.

Теперь, если мы настроимся на http: // localhost: 3000 /, результат должен быть таким:

Главное помнить, что реквизит неизменен! Если мы попытаемся сделать это:

this.props.name = "Jon Snow";

Наше приложение сломается и выдаст нам ошибку. Попробуй сам!

Следует отметить:

1. Реквизит может быть любым типом данных

• Строка
• Целое
• Массив
• Объекты
• Функции
• Логическое

2. Реквизит неизменен.

📝 Сохраните эту историю в Журнале.

👩‍💻 Просыпайтесь каждое воскресное утро и слушайте самые интересные истории недели в области технологий, которые ждут вас в вашем почтовом ящике. Прочтите информационный бюллетень« Примечательно в технологиях .