Przewodnik dla początkujących React Props [ze składnią]

React to licencjonowana przez MIT biblioteka JavaScript o otwartym kodzie źródłowym, która służy do projektowania interaktywnego interfejsu użytkownika dla aplikacji. Jest to deklaratywna, elastyczna i wydajna biblioteka oparta na komponentach, ułatwiająca życie programistom. Ponieważ jest to biblioteka oparta na komponentach, dzieli interfejs użytkownika na kilka pojedynczych części zwanych komponentami. Te komponenty muszą się ze sobą komunikować, aby prawidłowo funkcjonować, i właśnie wtedy pojawiają się rekwizyty React.

Czym są React Rekwizyty?

Słowo „Props” to słowo kluczowe w bibliotece React, które oznacza właściwości. Są one również czasami określane jako zmienna globalna lub obiekt w komponentach React. React props są podobne do argumentów w HTML. Warto zauważyć, że właściwości Reacta są takie, że zawsze przepływają w jednym kierunku, a zawarte w nich dane są tylko do odczytu. To sprawia, że ​​są niezmienne, co oznacza, że ​​dane płynące z jednego komponentu nie mogą być zmieniane w drugim. Możemy to zrozumieć na przykładzie czystej i nieczystej funkcji.

Jest to czysta funkcja, ponieważ zawsze daje to samo wyjście dla tych samych danych wejściowych:

funkcja prod(a, b) {

zwróć a * b;

}

Jest to nieczysta funkcja, ponieważ manipuluje własnymi danymi wejściowymi:

lokata funkcyjna(konto, kwota){

konto.suma += kwota;

}

Ponieważ właściwości Reacta są niezmienne, komponenty muszą działać jako czyste funkcje. To jedyna ścisła zasada w elastycznej bibliotece React.

Składnia przekazywania i uzyskiwania dostępu do rekwizytów React

Jak wspomniano wcześniej, właściwości React są podobne do argumentów HTML, a zatem, aby przekazać lub dodać dowolne właściwości do komponentu, możemy zrobić to podobnie do przekazywania atrybutów HTML.

Składnia:

<nazwa_komponentu props_name = „wartość” />

W powyższej składni ' nazwa_komponentu ' jest nazwą komponentu, do którego musimy przekazać props, nazwa_props to nazwa właściwości, a wartość to wartość właściwości.

Możemy uzyskać dostęp do dowolnych właściwości z poziomu klasy komponentu.

Składnia:

this.props .props_name;

W powyższej składni this.props jest globalnym obiektem używanym do uzyskiwania dostępu do dowolnych właściwości z klasy komponentu, a props_name jest nazwą właściwości React, do których chcemy uzyskać dostęp.

Przeczytaj: JavaScript kontra JQuery: różnica między JavaScript a JQuery

Jak korzystać z React Rekwizytów?

Istnieją dwa różne sposoby wykorzystania niezmiennych danych właściwości React w dowolnym komponencie. Te dwa sposoby polegają na dodaniu właściwości do funkcji respondDom.render() w głównym pliku lub dodaniu danych jako domyślnych właściwości w samym komponencie. Oto jak używać rekwizytów Reacta na dwa sposoby:

Korzystanie z React Pros z funkcji React.Dom.render()

Najpierw musimy dodać props w pliku komponentu.

importuj React z „react”; //import biblioteki React

class Przykład extends React.component { /* przykład to nazwa komponentu rozszerzającego właściwości klasy komponentu React */

renderowanie() {

powrót (

<div>

<h2>{to.rekwizyty. firstProp } w h2</h2>

<h3>{to, rekwizyty. secondProp } w h3</h3>

</div>

);

}

}

eksport domyślny Przykład; //eksportowanie komponentu

Teraz musimy dodać wartość do rekwizytów za pomocą funkcji actDom.render() w głównym pliku i stamtąd uzyskać do niej dostęp.

importuj React z „react”;

importuj ReactDom z 'react-dom';

import przykładu z './Example.jsx';

ReactDom.render(< Przykład firstProp = „To jest pierwszyProp ” secondProp = „To jest drugiProp ”/>, document.getElementById('przykład'));

eksport domyślny Przykład;

Wyniki:

To jest pierwszy Prop w h2

To jest drugi Prop w h3

Używanie React Props z domyślnymi Props w Konstruktorze Komponentów

Dodaj właściwości i ich wartości w pliku komponentu.

importuj React z „react”; //import biblioteki React

class Przykład extends React.component { /* przykład to nazwa komponentu rozszerzającego właściwości klasy komponentu React */

renderowanie() {

powrót (

<div>

<h2>{to.rekwizyty. pierwszyProp }</h2>

<h3>{to, rekwizyty. SecondProp }</h3>

</div>

);

}

}

Przykład .deafultProps = {

firstProp : „To jest pierwszyProp ”,

secondProp : „To jest secondProp ”

}

eksport domyślny Przykład; //eksportowanie komponentu

Dostęp do właściwości React z głównego pliku.

importuj React z „react”;

importuj ReactDom z 'react-dom';

import przykładu z './Example.jsx';

ReactDom.render(< Przykład />, document.getElementById('przykład'));

Dane wyjściowe do tego będą podobne do użycia funkcji actDom.render(), z tą różnicą, że tym razem odbywa się to za pomocą domyślnych właściwości.

Sprawdź: Vue vs React: różnica między Vue a React

Jak przekazywać React Props z jednego komponentu do drugiego?

Głównym zastosowaniem właściwości React jest przekazywanie danych między komponentami w React. Poniższy przykład pomoże nam zrozumieć, w jaki sposób przekazywane są dane.

importuj React z „react”;

class Fruit rozszerza React.Component {

renderowanie() {

return <h4>Jestem {this.props. nazwa } w h4</h4>

}

}

class Pytanie rozszerza React.Component {

renderowanie() {

powrót (

<div>

<h3>Który z owoców jesteś? Za 3 godz.</h3>

< Fruit name = „Mango” / > //Tworzenie rekwizytów i przypisywanie wartości

</div>

);

}

}

ReactDom.render(<Pytanie />, document.getElementById('owoc'));

Da to następujący wynik:

Którym owocem jesteś? w h3

Jestem Mango w h4

Używanie stanu i rekwizytów razem

Jak wszyscy wiemy, React jest językiem dynamicznym, a jego elastyczność to USP. Dlatego przy tworzeniu aplikacji korzystanie z samych właściwości Reacta nie wystarczy. Ten problem jest rozwiązywany z pomocą państwa. Stan to kolejna funkcja Reacta, która służy do zarządzania danymi. Zobaczmy, jak możemy połączyć właściwości React i state, aby nasza aplikacja była bardziej interaktywna i dynamiczna.

importuj React z „react”;

class Car rozszerza React.Component {

konstruktor(rekwizyty) {

super(rekwizyty);

ten.stan = {

firstCar: „To Mercedes-Benz! W h2”, //przypisanie wartości do stanu

secondCar: „To jest BMW! W h3” //przypisanie wartości do stanu

}

}

renderowanie() {

powrót (

<div>

<FirstCar firstProp = {this.state.firstCar}/> //przypisywanie wartości do właściwości

<SecondCar secondProp = {this.state.secondCar}/> //przypisywanie wartości do właściwości

</div>

);

}

}

klasa FirstCar rozszerza React.Component {

renderowanie() {

powrót (

<div>

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

</div>

);

}

}

class SecondCar rozszerza React.Component {

renderowanie() {

powrót (

<div>

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

</div>

);

}

}

eksportuj domyślny samochód;

Teraz musimy uzyskać dostęp do danych z głównego pliku.

importuj React z „react”;

import ReactDOM z 'react-dom';

importuj samochód z './Car.jsx';

ReactDOM.render(<Samochód />, document.getElementById('samochód'));

Wynik:

To jest Mercedes-Benz! w godz.2

To jest BMW! w h3

Przeczytaj także: Różnica między Node JS a React JS

Podsumowując

Połączenie obu właściwości Reacta i stanu do zarządzania danymi w React sprawia, że ​​jest to jedna z najbardziej przydatnych bibliotek JavaScript. Istnieje mnóstwo pomysłów na projekty React i tylko programiści mogą je ożywić. W związku z tym istnieje doskonałe zapotrzebowanie na programistów ReactJS i wzrost ich pensji .

Jeśli ekscytuje Cię pomysł pomagania firmom w tworzeniu aplikacji i pracy nad licznymi projektami React, aby uzyskać ogromne dochody, to czas podjąć działania, zanim będzie za późno. Możesz wziąć udział w kursach online oferowanych przez upGrad , aby dowiedzieć się wszystkiego o React i zostać pełnoprawnym programistą.

Jeśli chcesz dowiedzieć się więcej na temat reagowania, pełnego rozwoju oprogramowania, zapoznaj się z dyplomem PG upGrad i IIIT-B w zakresie pełnego tworzenia oprogramowania, który jest przeznaczony dla pracujących profesjonalistów i oferuje ponad 500 godzin rygorystycznych szkoleń, ponad 9 projektów, i zadania, status absolwentów IIIT-B, praktyczne praktyczne projekty zwieńczenia i pomoc w pracy z najlepszymi firmami.