JSX (JavaScript)
JSX ( JavaScript XML , формально JavaScript Syntax eXtension ) — это XML-подобное расширение синтаксиса языка JavaScript . [1] Первоначально созданный Facebook для использования с React , JSX был принят во многих веб-фреймворках . [2] : 5 [3] : 11 Будучи синтаксическим сахаром , JSX обычно транспилируется во вложенные вызовы функций JavaScript, структурно похожие на исходный JSX.
Разметка
[ редактировать ]Пример JSX-кода:
const App = () => {
return (
<div>
<p>Header</p>
<p>Content</p>
<p>Footer</p>
</div>
);
}
Вложенные элементы
[ редактировать ]Несколько элементов на одном уровне необходимо обернуть в один элемент React, например <div> элемент, показанный выше, фрагмент, обозначенный <Fragment> или в его сокращенной форме <>или возвращается в виде массива. [4] [5] [3] : 68–69
Атрибуты
[ редактировать ]JSX предоставляет ряд атрибутов элементов, отражающих атрибуты HTML. Пользовательские атрибуты также могут быть переданы компоненту. [6] Все атрибуты будут получены компонентом в качестве реквизита.
Выражения JavaScript
[ редактировать ] JavaScript Выражения (но не операторы ) можно использовать внутри JSX с фигурными скобками. {}: [3] : 14–16
<h1>{10+1}</h1>
В приведенном выше примере будет отображаться:
<h1>11</h1>
Условные выражения
[ редактировать ]Операторы if-else нельзя использовать внутри JSX, но вместо них можно использовать условные выражения.
Пример ниже отобразит { i === 1 ? 'true' : 'false' } как строка 'true' потому что i равен 1.
const App = () => {
const i = 1;
return (
<div>
<h1>{ i === 1 ? 'true' : 'false' }</h1>
</div>
);
}
Вышеуказанное будет отображать:
<div>
<h1>true</h1>
</div>
Функции и JSX можно использовать в условных выражениях: [3] : 88–90
const App = () => {
const sections = [1, 2, 3];
return (
<div>
{sections.map((n,i) => (
/* 'key' is used by React to keep track of list items and their changes */
/* Each 'key' must be unique */
<div key={"section-" + n}>
Section {n} {i === 0 && <span>(first)</span>}
</div>
))}
</div>
);
}
Вышеуказанное будет отображать:
<div>
<div>Section 1<span>(first)</span></div>
<div>Section 2</div>
<div>Section 3</div>
</div>
Код, написанный на JSX, требует преобразования с помощью такого инструмента, как Babel, прежде чем его смогут понять веб-браузеры. [7] [8] : 5 Эта обработка обычно выполняется в процессе сборки программного обеспечения приложения перед развертыванием .
См. также
[ редактировать ]Ссылки
[ редактировать ]- ^ «Черновик: спецификация JSX» . JSX . Фейсбук . Проверено 7 апреля 2018 г.
- ^ Ларсен, Джон (2021). Хуки React в действии с приостановкой и параллельным режимом . Мэннинг. ISBN 978-1720043997 .
- ^ Перейти обратно: а б с д Вирух, Робин. Дорога к реагированию . Линпаб. ISBN 978-1720043997 .
- ^ Кларк, Эндрю (26 сентября 2017 г.). «React v16.0§Новые типы возврата рендеринга: фрагменты и строки» . Реагирующий блог .
- ^ «React.Component: рендеринг» . Реагируйте .
- ^ Кларк, Эндрю (26 сентября 2017 г.). «React v16.0§Поддержка пользовательских атрибутов DOM» . Реагирующий блог .
- ^ Фишер, Людовико (6 сентября 2017 г.). Реагируйте по-настоящему: интерфейсный код, распутанный . Прагматичная книжная полка. ISBN 9781680504484 .
- ^ Ларсен, Джон (2021). Хуки React в действии с приостановкой и параллельным режимом . Мэннинг. ISBN 978-1720043997 .