Руководство для начинающих React Props [с синтаксисом]

React — это библиотека JavaScript с открытым исходным кодом, лицензированная MIT, которая используется для разработки интерактивного пользовательского интерфейса для приложений. Это декларативная, гибкая и эффективная библиотека на основе компонентов, облегчающая жизнь разработчикам. Поскольку это библиотека на основе компонентов, она делит пользовательский интерфейс на несколько отдельных частей, известных как компоненты. Эти компоненты должны взаимодействовать друг с другом, чтобы функционировать должным образом, и именно тогда на сцену выходят реквизиты React.

Что такое React-реквизиты?

Слово «реквизит» — это ключевое слово в библиотеке React, означающее свойства. Их также иногда называют глобальной переменной или объектом в компонентах React. Реквизиты React похожи на аргументы в HTML. Некоторые вещи, которые стоит отметить в React props, это то, что они всегда текут в одном направлении, а данные внутри них доступны только для чтения. Это делает их неизменяемыми, то есть данные, поступающие из одного компонента, не могут быть изменены в другом. Мы можем понять это на примере чистой и нечистой функции.

Это чистая функция, поскольку она всегда будет давать один и тот же результат для одних и тех же входных данных:

функция prod(a, b) {

вернуть а * б;

}

Это нечистая функция, поскольку она манипулирует своим собственным вводом:

функция депозит(счет, сумма){

account.total += сумма;

}

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

Синтаксис для передачи и доступа к реквизитам React

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

Синтаксис:

<component_name props_name = «значение» />

В приведенном выше синтаксисе « имя_компонента » — это имя компонента, которому нам нужно передать реквизиты, имя_реквизита — это имя реквизита, а значение — значение реквизита.

Мы можем получить доступ к любому реквизиту из класса компонента.

Синтаксис:

this.props .имя_реквизита;

В приведенном выше синтаксисе this.props — это глобальный объект, который используется для доступа к любым реквизитам из класса компонента, а props_name — это имя реквизита React, к которому мы хотим получить доступ.

Читайте: JavaScript против JQuery: разница между JavaScript и JQuery

Как использовать React Props?

Существует два разных способа использования неизменяемых данных React props в любом компоненте. Этими двумя способами являются добавление реквизита в функцию reactDom.render() в основном файле или добавление данных в качестве реквизита по умолчанию в самом компоненте. Вот как использовать реквизиты React обоими способами:

Использование React Props из функции react.Dom.render()

Сначала нам нужно добавить свойства в файл компонента.

импортировать React из «реагировать»; //импорт библиотеки React

class Example extends React.component { /* example — это имя компонента, которое расширяет свойства класса компонента React */

оказывать() {

вернуть (

<дел>

<h2>{this.props. firstProp } в h2</h2>

<h3>{это, реквизит. secondProp } в h3</h3>

</div>

);

}

}

экспортировать пример по умолчанию; // экспорт компонента

Теперь нам нужно добавить значение в реквизит через функцию reactDom.render() в основном файле и получить к нему доступ оттуда.

импортировать React из «реагировать»;

импортировать ReactDom из 'react-dom';

импортировать пример из './Example.jsx';

ReactDom.render(< Пример firstProp = «Это первое свойство » secondProp = «Это второе свойство »/>, document.getElementById('example'));

экспортировать пример по умолчанию;

Результаты:

Это firstProp в h2

Это второйProp в h3

Использование реквизитов React с реквизитами по умолчанию в конструкторе компонентов

Добавьте свойства и их значения в файл компонента.

импортировать React из «реагировать»; //импорт библиотеки React

class Example extends React.component { /* example — это имя компонента, которое расширяет свойства класса компонента React */

оказывать() {

вернуть (

<дел>

<h2>{this.props. firstProp </h2>

<h3>{это, реквизит. SecondProp </h3>

</div>

);

}

}

Пример .deafultProps = {

firstProp : «Это firstProp »,

secondProp : «Это secondProp »

}

экспортировать пример по умолчанию; // экспорт компонента

Доступ к реквизитам React из основного файла.

импортировать React из «реагировать»;

импортировать ReactDom из 'react-dom';

импортировать пример из './Example.jsx';

ReactDom.render(< Пример />, document.getElementById('пример'));

Выводы для этого будут аналогичны использованию функции reactDom.render(), за исключением того, что на этот раз это делается с помощью реквизита по умолчанию.

Отъезд: Vue против React: разница между Vue и React

Как передать реквизиты React из одного компонента в другой

Основное использование реквизита React — передача данных между компонентами в React. Следующий пример поможет нам понять, как передаются данные.

импортировать React из «реагировать»;

класс Fruit расширяет React.Component {

оказывать() {

return <h4>Я {this.props. имя } в h4</h4>

}

}

вопрос класса расширяет React.Component {

оказывать() {

вернуть (

<дел>

<h3>Какой ты фрукт? В h3</h3>

< Имя фрукта = «Манго» / > //Создание реквизита и присвоение значения

</div>

);

}

}

ReactDom.render(<Вопрос />, document.getElementById('плод'));

Это даст следующий результат:

Какой ты фрукт? В h3

Я Манго в h4

Совместное использование состояния и свойств

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

импортировать React из «реагировать»;

класс Car расширяет React.Component {

конструктор (реквизит) {

супер (реквизит);

это.состояние = {

firstCar: «Это Mercedes-Benz! В h2», // присваиваем значение состоянию

secondCar: «Это БМВ! В h3”//присвоение значения состоянию

}

}

оказывать() {

вернуть (

<дел>

<FirstCar firstProp = {this.state.firstCar}/> // присвоение значения свойствам

<SecondCar secondProp = {this.state.secondCar}/> // присвоение значения свойствам

</div>

);

}

}

класс FirstCar расширяет React.Component {

оказывать() {

вернуть (

<дел>

<h2>{this.props.firstProp}</h2>

</div>

);

}

}

класс SecondCar расширяет React.Component {

оказывать() {

вернуть (

<дел>

<h3>{this.props.secondProp}</h3>

</div>

);

}

}

экспорт автомобиля по умолчанию;

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

импортировать React из «реагировать»;

импортировать ReactDOM из 'react-dom';

импортировать автомобиль из './Car.jsx';

ReactDOM.render(<Car />, document.getElementById('car'));

Результат:

Это Мерседес-Бенц! В ч2

Это БМВ! В h3

Читайте также: Разница между Node JS и React JS

Подводя итог

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

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

Если вам интересно узнать больше о React, разработке полного стека, ознакомьтесь с дипломом PG upGrad & IIIT-B по разработке программного обеспечения с полным стеком, который предназначен для работающих профессионалов и предлагает более 500 часов тщательного обучения, 9+ проектов, и задания, статус выпускника IIIT-B, практические практические проекты и помощь в трудоустройстве в ведущих фирмах.