JSX ( расширение синтаксиса JavaScript, иногда называемое JavaScript XML ) - это расширение синтаксиса языка JavaScript . [1] По внешнему виду похож на HTML , JSX предоставляет способ структурирования рендеринга компонентов с использованием синтаксиса, знакомого многим разработчикам.
Компоненты React обычно пишутся с использованием JSX, хотя это не обязательно, поскольку компоненты также могут быть написаны на чистом JavaScript. JSX похож на другой синтаксис расширения, созданный Facebook для PHP под названием XHP .
Разметка
Пример JSX-кода:
класс App расширяет React . Component { render () { возврат ( < div > < p > Заголовок < / p> < p > Содержание < / p> < p > Нижний колонтитул < / p> < / div> ); }}
Вложенные элементы
Несколько элементов на одном уровне должны быть заключены в один элемент React, такой как элемент, показанный выше, фрагмент, очерченный
или в его сокращенной форме <>
, или возвращенный в виде массива. [2] [3]
Атрибуты
JSX предоставляет ряд атрибутов элементов, предназначенных для отражения атрибутов, предоставляемых HTML. Пользовательские атрибуты также могут быть переданы в компонент. [4] Все атрибуты будут получены компонентом как реквизиты.
Выражения JavaScript
Выражения JavaScript (но не операторы ) можно использовать внутри JSX с фигурными скобками {}
:
< h1 > { 10 + 1 } < / h1>
В приведенном выше примере будет отображаться:
< h1 > 11 h1 >
Условные утверждения
Операторы if – else нельзя использовать внутри JSX, но вместо них можно использовать условные выражения. В приведенном ниже примере будет отображаться { i === 1 ? 'true' : 'false' }
строка, 'true'
потому что i
она равна 1.
класс App расширяет React . Component { render () { const i = 1 ; возврат ( < div > < h1 > { i === 1 ? 'истина' : 'ложь' } < / h1> < / div> ); }}
Вышеупомянутое будет отображать:
< div > < h1 > истина h1 > div >
Функции и JSX можно использовать в условных выражениях:
класс App расширяет React . Component { render () { const разделы = [ 1 , 2 , 3 ]; возврат ( < div > { разделы . карта (( n , i ) => ( / * 'ключ' используется в реакции для отслеживания элементов списка и их изменений * / / * Каждый «ключ» должен быть уникальным * / < div key = { "section-" + n } > Раздел { n } { i === 0 && < span > ( первый ) < / span>} < / div> ))} < / div> ); }}
Вышеупомянутое будет отображать:
< div > < div > Раздел 1 div > < div > Раздел 2 div > < div > Раздел 3 div > div >
Код, написанный на JSX, требует преобразования с помощью такого инструмента, как Babel, прежде чем он станет понятен веб-браузерам. [5] Эта обработка обычно выполняется в процессе сборки программного обеспечения перед развертыванием приложения .
Внешние ссылки
Рекомендации
- ^ «Черновик: Спецификация JSX» . JSX . Facebook . Проверено 7 апреля 2018 года .
- ^ Кларк, Эндрю (26 сентября 2017 г.). «React v16.0§Новые типы возвращаемых результатов рендеринга: фрагменты и строки» . Блог React .
- ^ «React.Component: render» . Реагировать .
- ^ Кларк, Эндрю (26 сентября 2017 г.). «React v16.0§Поддержка настраиваемых атрибутов DOM» . Блог React .
- ^ Фишер, Людовико (06.09.2017). Реагировать по-настоящему: код переднего плана, не запутанный . Прагматическая книжная полка. ISBN 9781680504484.