Zaawansowany JSX

Gramatyka w JSX jest w większości taka sama jak w HTML, ale istnieją subtelne różnice, na które warto zwrócić uwagę. Prawdopodobnie najczęstsze z nich zawierają klasę wyrazów. W HTML często używamy klasy jako nazwy atrybutu. W JSX nie można używać atrybutu class! Zamiast tego używamy atrybutu className:

<h1 className="big">Hey</h1>

Dzieje się tak, ponieważ JSX przetłumaczono na JavaScript, a klasa jest zastrzeżonym słowem w języku JavaScript. Gdy renderowane jest JSX, atrybuty klasy JSX są automatycznie renderowane jako atrybuty klasy.

Większość elementów HTML używa dwóch znaczników: znaczników otwierania (<div>) i znaczników zamykających (</ div>). Jednak niektóre elementy HTML takie jak <img> i <input> używają tylko jednego tagu. Tag należący do elementu pojedynczego tagu nie jest znacznikiem otwierającym, ani znacznikiem zamykającym; jest to tag samozamykający się. Podczas pisania samoczynnie zamykającego znacznika w formacie HTML można opcjonalnie umieścić ukośnik. W JSX musisz dodać ukośnik. Jeśli napiszesz samoczynnie zamykający znacznik w JSX i zapomnisz o ukośniku pojawi się błąd:

Fine in JSX:   <br />  
NOT FINE AT ALL in JSX:   <br>

Każdy kod między znacznikami elementu JSX będzie odczytywany jako JSX, a nie jako zwykły JavaScript! JSX nie dodaje liczb – czyta je jako tekst, podobnie jak HTML. Potrzebujesz sposobu na napisanie kodu, który mówi: “Nawet jeśli znajduję się między tagami JSX, traktuj mnie jak zwykłego JavaScript, a nie jako JSX”. Można to zrobić przez zawijanie kodu w nawiasach klamrowych. Podczas wstrzykiwania JavaScript do JSX ten JavaScript jest częścią tego samego środowiska, co reszta kodu JavaScript w Twoim pliku. Oznacza to, że można uzyskać dostęp do zmiennych wewnątrz wyrażenia JSX, nawet jeśli te zmienne zostały zadeklarowane na zewnątrz.

// Declare a variable: 
const name = 'Gerdo'; 

// Access your variable  
// from inside of a JSX expression: 
const greeting = <p>Hello, {name}!</p>

Podczas pisania JSX powszechnie używamy zmiennych do ustawiania atrybutów. Oto przykład tego, co może działać:

// Use a variable to set the `height` and `width` attributes:  
const sideLength = "200px";  
const panda = (  
<img   
src="images/panda.jpg"   
alt="panda"   
height={sideLength}   
width={sideLength} /> 
);

Zauważ, że w tym przykładzie atrybuty <img /> otrzymują własną linię. Może to uczynić Twój kod bardziej czytelnym, jeśli masz wiele atrybutów na jednym elemencie. Właściwości obiektu są często używane do ustawiania atrybutów:

const pics = {  
panda: "http://bit.ly/1Tqltv5",  
owl: "http://bit.ly/1XGtkM3",  
owlCat: "http://bit.ly/1Upbczi" 
};   

const panda = (  
<img   src={pics.panda}   
alt="Lazy Panda" /> );  

const owl = (  
<img   src={pics.owl}   
alt="Unimpressed Owl" /> 
);  

const owlCat = (  
<img   
src={pics.owlCat}   
alt="Ghastly Abomination" /> 
);

Elementy JSX mogą mieć odbiorniki zdarzeń, podobnie jak elementy HTML. Programowanie w trybie React oznacza ciągłe działanie z odbiornikami zdarzeń. Utworzysz detektor zdarzeń, dając element JSX specjalny atrybut. Oto przykład:

<img onClick={myFunc} />

Nazwa atrybutu zdarzenia detektora zdarzeń powinna wyglądać tak jak onClick lub onMouseOver: słowo na, plus rodzaj zdarzenia, na który nasłuchujesz. Tutaj znajdziesz listę ważnych nazw zdarzeń. Wartością atrybutu obsługi zdarzenia powinna być funkcja. Powyższy przykład działa tylko wtedy, gdy myFunc to ważna funkcja, która została zdefiniowana gdzie indziej:

function myFunc() {  
alert('Make myFunc the pFunc... omg that was horrible i am so sorry'); 
}  
<img onClick={myFunc} />

Zauważ, że w języku HTML nazwy list zdarzeń są zapisywane we wszystkich małych literach, na przykład onclick lub onmouseover. W JSX nazwy detektorów zdarzeń są zapisywane w formacie camelCase, na przykład onClick lub onMouseOver.

W JSX jest bardziej kompaktowy sposób na napisanie warunkowych: operator potrójny. Operator trójskładowy działa tak samo w React, jak w zwykłym języku JavaScript. Jednak zaskakująco często pojawia się w programie React. Przypomnij jak to działa: piszesz x? y: z, gdzie x, y i z są wszystkimi wyraeniami JavaScript. Kiedy Twój kod zostanie wykonany, x zostanie ocenione jako “prawda” lub “fałszywe”. Jeśli x jest prawdą, to cały operator potrójny zwraca y. Jeśli x jest fałszywe, to cały operator potrójny zwraca z. Oto dobre wyjaśnienie, jeśli potrzebujesz odświeżenia. Oto jak możesz użyć operatora potrójnego w wyrażeniu JSX:

const headline = (  
<h1>  
{ age >= drinkingAge ? 'Buy Drink' : 'Do Teen Stuff' }  
</h1> 
);

W powyższym przykładzie, jeśli age jest większy lub równy drinkingAge , nagłówek będzie równy <h1>Buy drink </ h1>. W innym przypadku nagłówek będzie równy <h1> Do Teen Stuff </ h1>.

Podobnie jak operator potrójny, && nie jest specyficzny dla reakcji, ale w zaskakująco często pojawia się w programie React.

const tasty = (  
<ul>  
<li>Applesauce</li>  
{ !baby && <li>Pizza</li> }  
{ age > 15 && <li>Brussels Sprouts</li> }  
{ age > 20 && <li>Oysters</li> }  
{ age > 25 && <li>Grappa</li> }  
</ul> 
);

Za każdym razem, gdy widzisz && w tym przykładzie, albo jakiś kod zostanie uruchomiony, albo nie zostanie uruchomiony żaden kod. 

Metoda tablic .map () pojawia się często w React. Dobrze jest mieć zwyczaj używać go razem z JSX. Jeśli chcesz utworzyć listę elementów JSX, to .map () jest często najlepszym. Może się wydawać dziwne na początku:

const strings = ['Home', 'Shop', 'About Me'];  

const listItems = strings.map(string => 
<li>{string}</li>);  

<ul>{listItems}</ul>

W powyższym przykładzie zaczynają się ciągi znaków. Na tej tablicy ciągów wywołujemy mapę (), a wywołanie .map () zwraca nową tablicę <li> s. W ostatniej linijce przykładu zauważ, że {listItems} będzie oceniać tablicę, ponieważ jest to zwracana wartość .map ()! JSX <li> s nie muszą być w takiej tablicy, ale mogą być.

// This is fine in JSX, not in an explicit array:  
<ul>  
<li>item 1</li>  
<li>item 2</li>  
<li>item 3</li> 
</ul>  

// This is also fine!  
const liArray = [  
<li>item 1</li>,   
<li>item 2<li>,   
<li>item 3</li> 
];  

<ul>{liArray}</ul>

 

 

 

 

 

 

 

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *