Props czyli atrybuty w React.js

[type-of-web-komentarze[bot]]

Props czyli atrybuty w React.js

W tej części nauczysz się parametryzować komponenty w React.js. Poznasz pojęcie "props" oraz dowiesz się do czego one (te „propsy”) służą.

https://typeofweb.com/props-czyli-atrybuty-react-js

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Tomasz Sochacki	http://poradnik.drogimex.pl	2017-12-12 19:45

Fajnie, że działasz krok po kroku, wiele osób na pewno zyska na tym blogu. Może warto jeszcze tylko wtrącić gdzieś zdanko, że używasz destrukturyzacji obiektu props tworząc komponent. W wielu poradnikach widywałem zapisy "( props ) => { ... }". Osobiście skłaniam się ku Twojej wersji i sam również notorycznie korzystam z dobrodziejstwa destrukturyzacji ale nie wszyscy mogą wiedzieć co tu się dzieje i będą mieć problem też inne poradniki :) Pozdrawiam, i powodzenia w react-blogowaniu :) Im więcej o React w PL tym lepiej dla polskiego front-endu :)

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2017-12-13 16:17

Słuszna uwaga ;)

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Marcin Rudzki		2018-01-21 08:14

Z tym przekazywaniem HTML, to jest trochę problem. Z poniższych wersji zadziała tylko ta trzecia, tj. linia nr 30 na screenie: https://uploads.disquscdn.com/images/bd3c08b9b705330694f4cb959c0879154dcbe5f0dacd65c9115373df07a4b105.png
Stackoverflow wspomina też o dangerouslySetInnerHTML. Czy są jeszcze inne możliwości przekazania HTML przez props? Jaki sposób polecasz?

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2018-01-21 21:30

Dokłanie o to mi chodziło ;) React ma wbudowany system, który zabezpiecza przed przypadkowym zrobieniem sobie krzywdy. API ma zwracać stringa, ale przypadkiem zwróciło HTML (z jakiegoś powodu)? Nie szkodzi! React nie wykona tego HTML-a, tylko wyświetli go jako ciąg znaków :)

Jeśli potrzebujesz wstrzykiwać HTML ze stringa to spróbuj budować logikę inaczej (JSX), albo ostatecznie użyj dangerouslySetInnerHTML. Nazwa mówi wszystko ;)

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Kasia		2020-06-01 21:12

Podaję HTML jako defaultowa wartość title i mi normalnie wstrzyknęło HTML, a nie ciąg znaków także chyba jakieś zmiany nastąpiły.

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2020-06-02 00:20

Nie było żadnych zmian. Pokaż kod :)

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Kamil Mirosz		2019-01-04 11:27

Wszystko działa oprócz htmla :) zwróciło mi to jako string, nie mogłem przekazać objektu np {person} ale {person.name} już działa :)
Gdzieś w komentarzach pojawiło się coś takiego prop={ {key: val} } Ale totalnie tego nie rozumiem :)

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Rafał Sikora		2019-01-04 11:27

Generalnie kursik ok i niema problemu by go zrozumieć .. jednak nie do końca łapię jak to jest z tymi props, skoro wprowadzasz obiekt {}, zapis niepowinien być { key : val } ? coś mi umyka?

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2019-09-19 17:54

Jeśli przekazujesz obiekt to tak. Wtedy będziesz miał prop={ {key: val} }

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	PiotrPo	http://potrebka.pl	2019-01-04 11:27

Można przekazać wszystko, jeżeli props jest w cudzysłowach traktowany jest jako string, w przypadku klamr jako funkcja, objekt lub zmienna.

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2019-09-19 17:54

A co z HTML-em? ;)

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Joanna Trapp		2019-01-25 22:28

Ćwiczenie wykonane, wyświetla się cała tablica, obiekt cały nie chce się wyświetlić. Nie pokazuje tagów HTML, od razu wykonany kod.

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2019-02-02 07:47

A to jeszcze zależy w jaki sposób się ten HTML przekaże ;)

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Piotr Siekierzyński		2019-01-26 23:15

Nie za bardzo rozumiem, czemu działa:
<MojKomponent content={ ["aaa","ssss"] } />
zaś nie działa:
<MojKomponent content=["aaa","ssss"] />

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2019-02-02 07:47

Domyślam się, że chodziło o różnice pomiędzy content={['aaa']} a content=['aaa']? To pierwsze to poprawna składnia JSX, to drugie nie. Wszystkie wyrażenia JS-owe muszą być włożone w { i }.

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Tomeek		2019-02-10 19:35

Mam problem nie działa mi program i nie mam za bardzo pomysłu przez co. Tu wklejam kod:

<script type="text/babel"> function MojKomponent({ title="Modal", content }) { return (

{title}

{content}

); } ReactDOM.render( , document.getElementById("siema") ); </script>

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Tomeek		2019-02-11 00:55

Uncaught Invariant Violation: Target container is not a DOM element.
at invariant (https://unpkg.com/react-dom@16.8.1/umd/react-dom.development.js:49:15)
at Object.render (https://unpkg.com/react-dom@16.8.1/umd/react-dom.development.js:20747:36)
at :27:10
at run (https://unpkg.com/babel-standalone@6.26.0/babel.js:61531:11)
at check (https://unpkg.com/babel-standalone@6.26.0/babel.js:61597:10)
at loadScripts (https://unpkg.com/babel-standalone@6.26.0/babel.js:61638:4)
at runScripts (https://unpkg.com/babel-standalone@6.26.0/babel.js:61668:4)
at transformScriptTags (https://unpkg.com/babel-standalone@6.26.0/babel.js:336:40)
at https://unpkg.com/babel-standalone@6.26.0/babel.js:327:13

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2019-02-11 01:40

Masz na stronie element z id=siema?

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Tomeek		2019-02-11 14:46

Dobra dzięki za pomoc właśnie zauważyłem że w id miałem literówkę.

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2019-02-11 16:41

Wrzuć gdzieś cały kod :)

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Tomeek		2019-02-11 17:27

https://pastebin.com/6qeSj8F2

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Kamil		2019-02-22 13:05

Cześć,

Podzielę się swoimi obserwacjami, bo albo czegoś nie rozumiem, albo jest niedostatecznie wytłumaczone.

Chcąc zamienić Twój przykład:

< MojKomponent title="I co, duma?" />

... na np. liczbę, robię tak:

< MojKomponent title=666 />

To nie działa, muszę użyć title={666}, prawda? Dlaczego?

PS: właśnie zauważyłem że Disqus automatycznie modyfikuje tagi, m.in. robi LowerCase, a dla atrybutów (props) dodaje cudzysłów jeśli go pominę. Dlatego użyłem spacji przed MojKomponent.

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2019-02-22 16:20

Disqus robi złą robotę :|

Wracając do tematu: Wszystkie atrybuty w takim klasycznym zapisie HTML-owym to stringi. Czyli cokolwiek="111" to będzie string "111". Aby to obejść, możesz uży składni z JSX: cokolwiek={…} i zamiast trzech kropek możesz podać dowolny typ danych, nawet tablice, obiekty, no i liczby :)

Wtedy cokolwiek={"111"} to będzie string, a cokolwiek={111} to liczba.

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	damian		2019-06-02 15:15

Dziwne rzeczy,
Bez problemu podałem < H2 markup={} />,
w render() return Sep: {this.props.markup};
I śmiga HTML

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2019-06-04 11:38

Pokaż kod, bo chyba nie zrozumiałem ;)

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Patrycja Bąk		2019-10-29 17:51

Wygląda na to, że wszystko jest przekazywane jako string, w przypadku arraya, obiektu wyciągane są wartości :) Funkcja nie pokazała się

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2019-10-31 18:35

React ma wbudowany system, który zabezpiecza przed przypadkowym zrobieniem sobie krzywdy. API ma zwracać stringa, ale przypadkiem zwróciło HTML (z jakiegoś powodu)? Nie szkodzi! React nie wykona tego HTML-a, tylko wyświetli go jako ciąg znaków :)

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Paweł Kołodziejczak		2020-01-16 11:29

W dzisiejszych czasach dynamiczne renderowanie DOM w native JS to banał, reaktywny DOM możemy tworzyć przy pomocy template strings + pułapek Proxy (jest też dostępny pdolyfill dla IE11 :)) w załączniku screen kodu React vs Native JS skoro nie widać różnicy to po co pobierać 70+ kb biblioteki i uczyć się obsługi frameworka który suma summarum indywidualną składnię i docelowo parsuje w natywnym silniku JS wbudowanym w przeglądarce.

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2020-01-16 12:35

Słaby trolling, 2/10 :)

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Paweł Kołodziejczak		2020-01-16 13:06

Oh dear, przeczytaj ponownie ze zrozumieniem - na co komu spam?

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2020-01-16 14:41

Nie rozumiem, jak możesz porównywać klejenie stringów do Reakta. Albo nie masz pojęcia na ten temat, albo trollujesz. Pewnie popełniam błąd, ale załóżmy to pierwsze.
A więc:pokaż, jak działa Twoja funkcja render. Pokaż prosty przykład: input i obok niego renderuje się ten sam tekst, który w ten input wpisujesz.

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Paweł Kołodziejczak		2020-01-16 15:59

Renderowanie DOM + aktualizacja tagu "p" w zależności od wpisania tekstu w wygląda tak:

Funkcje pomocnicze "render" oraz "observe":

Podobnie jak w znanych frameworkach możesz stworzyć jeden wielki JSON z setką parametrów, tworzysz jedną pułapkę na cały object i wszystkie parametry są aktualizowane w zależności od funkcji callback.

Oczywiście to zajście prosta, strukturalna implementacja. W projektach wszystko funkcjonuje w osobnych modułach ES6 aby zachować odpowiednią estetykę i nie pisać pojedynczych skryptów z milionem linii kodu (coś ala komponenty w React ;]). Posiadam też własną klasę ok 119 linijek kodu która bez pułapek proxy obserwuje zmiany w DOM'ie w czasie rzeczywistym wykorzystując parametry data-prop - działanie identyczne jak props i computed props w React lub Vue.

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2020-01-16 19:48

To jakieś żarty, tak? Ehhh. Do widzenia.

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Michał		2021-04-08 17:21

Cześć.
Zastanawia mnie, dlaczego utworzyłeś stałą dla zdjęcia.
Czy wklejenie od razu adresu nie byłoby czytelniejsze?
Chodzi mi o zamianę
const imgUrl = https://api.adorable.io/avatars/55/${login}.png;

na

To o jedna linijka mniej :)

 
 

Komentarz zaimportowany z WordPressa