Часть 2 из новой серии изучения React.js. В этом разделе мы рассмотрим Advanced JSX.
Добавление атрибутов className в JSX
Грамматика в React JSX в основном такая же, как и в HTML, но есть небольшие отличия, на которые следует обратить внимание.
В HTML мы обычно используем класс в качестве имени атрибута:
<div class="primary">Button</div>
В JSX вы используете className вместо слова class!
<div className="primary">Button</div>
Поскольку JSX ближе к JavaScript, чем HTML, React DOM использует соглашение об именах свойств camelCase
вместо имен атрибутов HTML. При отображении JSX атрибуты JSX className автоматически отображаются как атрибуты class.
const myElement = ( <h1 className="greeting"> Hello, there! </h1> );
Самозакрывающийся тег и фигурные скобки в JSX
Когда вы пишете самозакрывающийся тег в HTML, например (‹img›, ‹input›, ‹br›), необязательно включать косую черту непосредственно перед последней угловой скобкой:
Works with a slash in HTML: <br /> Also works fine in HTML, without the slash: <br>
Но! В JSX вы должны включить косую черту, иначе вы получите ошибку:
Fine in JSX: <br /> WONT WORK AT ALL IN JSX: <br>
Любой код между тегами элемента JSX будет читаться как JSX, а не как обычный Javascript! JSX не добавляет числа - он читает их как текст, как и HTML. Вам нужно написать код, заключив их в фигурные скобки. Таким образом, вы говорите: «Даже если мой код находится между тегами JSX, относитесь ко мне как к обычному Javascript, а не как к JSX».
//Curly braces in JSX import React from 'react'; import ReactDOM from 'react-dom'; const math = (<h1>4 + 3={4 + 3}</h1>); ReactDOM.render(math, document.getElementById('app')); //This outputs 4 + 3 = 7
Переменные и переменные атрибуты в JSX
Вы можете получить доступ к переменным внутри выражения JSX, даже если эти переменные были объявлены снаружи.
//Variables in JSX import React from 'react'; import ReactDOM from 'react-dom'; const aString = "Hey, I am a string."; ReactDOM.render(<h1>{aString}</h1>, document.getElementById('app')); //Hey, I am a string.
Вот пример того, как работают переменные атрибуты:
//Object properties are often used to set attributes: const imgs = { butterfly: "https://media1.britannica.com/eb-media/06/1706-004-A94493A0.jpg", honeybee: "https://media1.britannica.com/eb-media/69/162669-120-995C9085.jpg", whale: "https://media1.britannica.com/eb-media/52/1452-004-BB2C55E0.jpg" } const butterflyImg = ( <img src={imgs.butterfly} alt="Beautiful butterfly" /> ); const honeybeeImg = ( <img src={imgs.honeybee} alt="Beautiful honeybee" /> ); //Use a variable to set the 'height' and 'width' attributes of an img: const imgSize = "150px"; const whaleImg = ( <img src={img.whale} alt="whale" height={imgSize} width={imgSize} /> );
Слушатели событий и условные операторы в JSX
Элементы JSX могут использовать прослушиватели событий, как и элементы HTML. Вы можете использовать прослушиватель событий, присвоив элементу JSX специальный атрибут. Вот пример:
<img onClick={myFunc} />
Значение атрибута прослушивателя событий должно быть функцией. Приведенный выше пример работает, только если myFunc была допустимой функцией, которая была определена в другом месте:
//Event listeners function myFunc() { alert ("We made our function pop an alert"); } <img onClick={myFunc} />
Теперь, когда вы узнали, как использовать фигурные скобки для вставки Javascript в выражение JSX, есть правило, которое вам необходимо знать: вы не можете вставлять оператор if в выражение JSX.
//This code wont work: const testCondition = ( <h1> { if (purchase.complete) { `Thanks for using us` } </h1> )
Причина, по которой приведенный выше код не работает, заключается в способе компиляции JSX. Вы можете узнать об этом подробнее здесь, но это не должно нас огорчать. Если приведенный выше пример не работает. Если вы не можете внедрить оператор if в JSX, как вы можете написать условный оператор? Давайте рассмотрим пример ниже:
import React from 'react'; import ReactDOM from 'react-dom'; let message; if (user.age >= drinkingAge) { message = ( <h1> Hey, you can drink alcohol beverage! </h1> ); } else { message = ( <h1> Hey, you can have water instead </h1> ); } ReactDOM.render(message, document.getElementById('app'));
Приведенный выше пример работает, потому что if и else не включены между тегами JSX. Один из вариантов - написать оператор if, а не внедрять его в JSX.
Есть еще один способ писать условные выражения в JSX: тернарный оператор . Вот как можно использовать тернарный оператор в выражении JSX:
const textTernary = ( <h1> { age >= drinkingAge ? 'Serve Beer' : 'Serve water or candy bar' } </h1> );
В приведенном выше примере, если возраст больше или равен drinkAge, тогда textTernary будет ‹h1› Подать пиво ‹/h1›. В противном случае textTernary будет равно ‹h1› Подать воду или шоколадный батончик ‹/h1›.
Вы можете делать больше в JSX, например использовать && Conditionals, map и keys… точно так же, как мы используем их в обычном Javascript. Надеюсь, вы сможете использовать эту серию статей и создать отличное приложение на React.