Reagovat JSX
Co je JSX?
JSX je zkratka pro JavaScript XML.
JSX nám umožňuje psát HTML v Reactu.
JSX usnadňuje psaní a přidávání HTML v Reactu.
Kódování JSX
JSX nám umožňuje psát prvky HTML v JavaScriptu a umísťovat je do DOM bez jakýchkoliv createElement()
a/nebo
appendChild()
metod.
JSX převádí značky HTML na prvky reakce.
Nemusíte používat JSX, ale JSX usnadňuje psaní aplikací React.
Zde jsou dva příklady. První používá JSX a druhý ne:
Příklad 1
JSX:
const myelement = <h1>I Love JSX!</h1>;
ReactDOM.render(myelement, document.getElementById('root'));
Příklad 2
Bez JSX:
const myelement = React.createElement('h1', {}, 'I do not use JSX!');
ReactDOM.render(myelement, document.getElementById('root'));
Jak můžete vidět v prvním příkladu, JSX nám umožňuje psát HTML přímo v kódu JavaScript.
JSX je rozšíření jazyka JavaScript založené na ES6 a je za běhu přeloženo do běžného JavaScriptu.
Získejte certifikaci!
95 $ PŘIHLÁSIT SE
Výrazy v JSX
S JSX můžete psát výrazy do složených závorek { }
.
Výraz může být proměnná React nebo vlastnost nebo jakýkoli jiný platný JavaScriptový výraz. JSX provede výraz a vrátí výsledek:
Příklad
Proveďte výraz 5 + 5
:
const myelement = <h1>React is {5 + 5} times better with JSX</h1>;
Vložení velkého bloku HTML
Chcete-li psát HTML na více řádků, vložte HTML do závorek:
Příklad
Vytvořte seznam se třemi položkami seznamu:
const myelement = (
<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Cherries</li>
</ul>
);
Jeden prvek nejvyšší úrovně
Kód HTML musí být zabalen do JEDNÉHO prvku nejvyšší úrovně.
Pokud tedy chcete psát dva odstavce, musíte je vložit do nadřazeného prvku, jako div
prvek.
Příklad
Zabalte dva odstavce do jednoho prvku DIV:
const myelement = (
<div>
<p>I am a paragraph.</p>
<p>I am a paragraph too.</p>
</div>
);
JSX vyvolá chybu, pokud HTML není správné nebo pokud HTML chybí nadřazený prvek.
Případně můžete použít "fragment" k zalomení více řádků. Tím zabráníte zbytečnému přidávání dalších uzlů do DOM.
Fragment vypadá jako prázdná HTML značka: <></>
.
Příklad
Zabalte dva odstavce do fragmentu:
const myelement = (
<>
<p>I am a paragraph.</p>
<p>I am a paragraph too.</p>
</>
);
Prvky musí být uzavřeny
JSX se řídí pravidly XML, a proto musí být prvky HTML správně uzavřeny.
Příklad
Zavřete prázdné prvky pomocí/>
const myelement = <input type="text" />;
JSX vyvolá chybu, pokud HTML není správně uzavřeno.
Atribut class = className
Atribut class
je velmi používaný atribut v HTML, ale protože JSX se vykresluje jako JavaScript a
class
klíčové slovo je vyhrazené slovo v JavaScriptu, nemůžete jej používat v JSX.
Místo toho použijte atribut className
.
JSX to vyřešil použitím className
místo toho. Když je JSX vykreslen, převádí className
atributy na class
atributy.
Příklad
Použijte atribut className
namísto
class
v JSX:
const myelement = <h1 className="myclass">Hello World</h1>;
Podmínky - příkazy if
React podporuje if
příkazy, ale ne uvnitř JSX.
Abyste mohli používat podmíněné příkazy v JSX, měli byste if
příkazy umístit mimo JSX, nebo můžete místo toho použít ternární výraz:
Možnost 1:
Napište if
příkazy mimo kód JSX:
Příklad
Napište „Ahoj“, pokud x
je menší než 10, jinak „Sbohem“:
const x = 5;
let text = "Goodbye";
if (x < 10) {
text = "Hello";
}
const myelement = <h1>{text}</h1>;
Možnost 2:
Místo toho použijte ternární výrazy:
Příklad
Napište „Ahoj“, pokud x
je menší než 10, jinak „Sbohem“:
const x = 5;
const myelement = <h1>{(x) < 10 ? "Hello" : "Goodbye"}</h1>;
Všimněte si , že aby bylo možné vložit JavaScriptový výraz do JSX, musí být JavaScript zabalen do složených závorek, {}
.