{"componentChunkName":"component---src-templates-docs-js","path":"/docs/jsx-in-depth.html","result":{"data":{"markdownRemark":{"html":"

JSX — синтаксический сахар для функции React.createElement(component, props, ...children). Этот JSX-код:

\n
<MyButton color=\"blue\" shadowSize={2}>\n  Нажми меня\n</MyButton>
\n

Скомпилируется в:

\n
React.createElement(\n  MyButton,\n  {color: 'blue', shadowSize: 2},\n  'Нажми меня'\n)
\n

Вы также можете использовать самозакрывающийся тег, если отсутствуют дочерние элементы. Поэтому код:

\n
<div className=\"sidebar\" />
\n

Скомпилируется в:

\n
React.createElement(\n  'div',\n  {className: 'sidebar'}\n)
\n

Если вы хотите проверить, как JSX-код компилируется в JavaScript, попробуйте онлайн-компилятор Babel.

\n

Указание типа React-элемента

\n

Первая часть JSX тега определяет тип React-элемента.

\n

Типы, написанные с большой буквы, указывают, что JSX-тег ссылается на React-компонент. Эти теги компилируются в прямую ссылку на именованную переменную, поэтому, если вы используете JSX-выражение <Foo />, то Foo должен быть в области видимости.

\n

React должен находиться в области видимости

\n

Поскольку JSX компилируется в вызов React.createElement, библиотека React должна всегда быть в области видимости вашего JSX-кода.

\n

К примеру, в данном коде оба импорта являются необходимыми, даже если на React и CustomButton нет прямых ссылок из JavaScript:

\n
import React from 'react';import CustomButton from './CustomButton';\nfunction WarningButton() {\n  // return React.createElement(CustomButton, {color: 'red'}, null);  return <CustomButton color=\"red\" />;\n}
\n

Если вы не используете сборщик JavaScript и загружаете React с помощью тега <script>, то он уже доступен как React в глобальной области видимости.

\n

Использование записи через точку

\n

Вы также можете ссылаться на React-компонент, используя запись через точку. Это удобно, если у вас есть модуль, который экспортирует много React-компонентов. К примеру, если MyComponents.DatePicker является компонентом, то вы можете обратиться к нему напрямую, используя запись через точку:

\n
import React from 'react';\n\nconst MyComponents = {\n  DatePicker: function DatePicker(props) {\n    return <div>Представьте, что здесь цвет {props.color} виджета выбора даты.</div>;\n  }\n}\n\nfunction BlueDatePicker() {\n  return <MyComponents.DatePicker color=\"blue\" />;}
\n

Названия типов пользовательских компонентов должны начинаться с большой буквы

\n

Если название типа элемента начинается с маленькой буквы, он ссылается на встроенный компонент, к примеру <div> или <span>, что в результате приведёт к тому, что в React.createElement будет передана строка 'div' или 'span'. Типы, начинающиеся с заглавной буквы, такие как <Foo />, компилируются в React.createElement(Foo) и соответствуют компоненту, который был объявлен или импортирован в вашем JavaScript-файле.

\n

Мы рекомендуем называть компоненты с заглавной буквы. Если у вас есть компонент, название которого начинается с маленькой буквы, то перед тем как использовать его в JSX, присвойте его в переменную, которая имеет название с заглавной буквы.

\n

К примеру, этот код будет работать не так, как ожидается:

\n
import React from 'react';\n\n// Неправильно! Это компонент и он должен быть записан с заглавной буквы:function hello(props) {  // Правильно! Использование <div> разрешено, так как это валидный HTML-тег:\n  return <div>Привет, {props.toWhat}</div>;\n}\n\nfunction HelloWorld() {\n  // Неправильно! React думает, что <hello /> - это HTML-тег,  // потому что он записан с маленькой буквы:  return <hello toWhat=\"Мир\" />;\n}
\n

Для того, чтобы исправить это, мы переименуем hello в Hello и станем использовать <Hello />, когда будем ссылаться на него:

\n
import React from 'react';\n\n// Правильно! Это компонент и он должен быть записан с заглавной буквы:function Hello(props) {  // Правильно! Использование <div> разрешено, так как это валидный HTML-тег:\n  return <div>Привет, {props.toWhat}</div>;\n}\n\nfunction HelloWorld() {\n  // Правильно! React знает, что <Hello /> это компонент,  // потому что он написан с заглавной буквы.  return <Hello toWhat=\"Мир\" />;\n}
\n

Выбор типа во время исполнения

\n

В качестве типа React-элемента нельзя использовать выражение. Если вы хотите использовать выражение, чтобы указать тип элемента, присвойте его в переменную, начинающуюся с заглавной буквы. Это подходит для рендера компонентов в зависимости от ваших пропсов:

\n
import React from 'react';\nimport { PhotoStory, VideoStory } from './stories';\n\nconst components = {\n  photo: PhotoStory,\n  video: VideoStory\n};\n\nfunction Story(props) {\n  // Неправильно! JSX-тип не может являться выражением  return <components[props.storyType] story={props.story} />;}
\n

Чтобы исправить это, мы присвоим тип в переменную, начинающуюся с заглавной буквы:

\n
import React from 'react';\nimport { PhotoStory, VideoStory } from './stories';\n\nconst components = {\n  photo: PhotoStory,\n  video: VideoStory\n};\n\nfunction Story(props) {\n  // Правильно! JSX-тип может являться переменной, названной с заглавной буквы  const SpecificStory = components[props.storyType];  return <SpecificStory story={props.story} />;}
\n

Пропсы в JSX

\n

Существует несколько разных способов передачи пропсов в JSX.

\n

JavaScript-выражения как пропсы

\n

Вы можете передавать любые JavaScript-выражения как пропсы, обернув их в {}. К примеру, в этом JSX:

\n
<MyComponent foo={1 + 2 + 3 + 4} />
\n

Для MyComponent значение props.foo будет равно 10, потому что выражение 1 + 2 + 3 + 4 будет вычислено.

\n

Оператор if и цикл for не являются выражениями в JavaScript, поэтому их нельзя непосредственно использовать в JSX. Вместо этого, вы можете окружить ими JSX-код. К примеру:

\n
function NumberDescriber(props) {\n  let description;\n  if (props.number % 2 == 0) {    description = <strong>чётным</strong>;  } else {    description = <i>нечётным</i>;  }  return <div>{props.number} является {description} числом</div>;\n}
\n

Вы можете узнать больше про условный рендеринг и циклы в соответствующих разделах.

\n

Строковые литералы

\n

Вы можете передать строковый литерал как проп. Эти два выражения эквивалентны:

\n
<MyComponent message=\"привет, мир\" />\n\n<MyComponent message={'привет, мир'} />
\n

Когда вы передаёте строковый литерал, все его возможные символы будут преобразованы в соответствующие HTML-сущности. Поэтому эти два JSX-выражения будут эквивалентны:

\n
<MyComponent message=\"&lt;3\" />\n\n<MyComponent message={'<3'} />
\n

Обычно такое поведение не должно вас волновать. Оно упомянуто для полноты картины.

\n

Установка пропсов по умолчанию в «true»

\n

Если вы не передаёте значение в проп, то по умолчанию оно будет true. Эти два JSX выражения эквивалентны:

\n
<MyTextBox autocomplete />\n\n<MyTextBox autocomplete={true} />
\n

В основном, мы не рекомендуем не передавать значение для пропа, потому что это может быть воспринято как сокращение имён свойств из ES6. Тогда, например, {foo} это короткая запись {foo: foo}, но никак не {foo: true}. Такое поведение существует для того, чтобы соответствовать поведению HTML.

\n

Атрибуты расширения

\n

Если у вас уже есть пропсы внутри объекта props и вы хотите передать их в JSX, вы можете использовать оператор расширения .... Эти два компонента эквивалентны:

\n
function App1() {\n  return <Greeting firstName=\"Иван\" lastName=\"Иванов\" />;\n}\n\nfunction App2() {\n  const props = {firstName: 'Иван', lastName: 'Иванов'};\n  return <Greeting {...props} />;}
\n

Вы так же можете выбрать конкретные пропсы, которые ваш компонент будет использовать, передавая все остальные пропсы с помощью оператора расширения.

\n
const Button = props => {\n  const { kind, ...other } = props;  const className = kind === \"primary\" ? \"PrimaryButton\" : \"SecondaryButton\";\n  return <button className={className} {...other} />;\n};\n\nconst App = () => {\n  return (\n    <div>\n      <Button kind=\"primary\" onClick={() => console.log(\"Кнопка нажата!\")}>\n        Привет, мир!\n      </Button>\n    </div>\n  );\n};
\n

В приведённом выше примере, проп kind используется безопасно и не передаётся в элемент <button>, находящийся в DOM.\nВсе остальные пропсы передаются с помощью объекта ...other, что делает этот компонент очень гибким. Вы можете видеть, что он передаёт пропсы onClick и children.

\n

Атрибуты расширения могут быть полезны, однако, также они позволяют передать ненужные пропсы в компоненты или невалидные HTML-атрибуты в DOM. Мы рекомендуем использовать этот синтаксис с осторожностью.

\n

Дочерние компоненты в JSX

\n

В JSX-выражениях содержимое, которое расположено между открывающими и закрывающими тегами, передаётся с помощью специального пропа: props.children. Существует несколько способов передать дочерние компоненты:

\n

Строковые литералы

\n

Если вы поместите строку между открывающим и закрывающим тегом, то props.children будет равно этой строке. Это полезно при создании встроенных HTML-элементов. К примеру:

\n
<MyComponent>Привет, мир!</MyComponent>
\n

Это корректный JSX-код, в котором значение props.children в MyComponent будет строкой "Привет, мир!". HTML не экранируется, поэтому JSX можно писать также как HTML:

\n
<div>Это одновременно и валидный HTML и JSX.</div>
\n

JSX удаляет пустые строки и пробелы в начале и конце строки. Новые строки, примыкающие к тегу будут удалены. Новые строки между строковых литералов сжимаются в один пробел. Следующие три примера кода рендерят одинаковый результат:

\n
<div>Привет, мир</div>\n\n<div>\n  Привет, мир\n</div>\n\n<div>\n  Привет,\n  мир\n</div>\n\n<div>\n\n  Привет, мир\n</div>
\n

Дочерние JSX-компоненты

\n

Чтобы отобразить вложенные компоненты, можно указать несколько JSX-элементов в качестве дочерних.

\n
<MyContainer>\n  <MyFirstComponent />\n  <MySecondComponent />\n</MyContainer>
\n

Вы можете смешивать различные типы потомков, скажем, использовать строковый литерал вместе с JSX-элементами. Вот ещё один пример, в котором JSX похож на HTML, причём данный код является валидным и для JSX, и для HTML:

\n
<div>\n  Ниже представлен список:\n  <ul>\n    <li>Элемент 1</li>\n    <li>Элемент 2</li>\n  </ul>\n</div>
\n

Также React-компонент может возвращать массив элементов:

\n
render() {\n  // Не нужно оборачивать список элементов в дополнительный элемент!\n  return [\n    // Не забудьте про ключи :)\n    <li key=\"A\">Первый элемент</li>,\n    <li key=\"B\">Второй элемент</li>,\n    <li key=\"C\">Третий элемент</li>,\n  ];\n}
\n

JavaScript-выражения как дочерние компоненты

\n

Вы можете передать любое JavaScript-выражение как дочерний компонент, обернув его в {}. К примеру, эти выражения эквивалентны:

\n
<MyComponent>Пример</MyComponent>\n\n<MyComponent>{'Пример'}</MyComponent>
\n

Часто это бывает полезно при рендере списка JSX-выражений произвольной длины. Например, эта запись рендерит HTML-список:

\n
function Item(props) {\n  return <li>{props.message}</li>;}\n\nfunction TodoList() {\n  const todos = ['закончить документацию', 'отправить пулреквест', 'снова напомнить Дэну про ревью'];\n  return (\n    <ul>\n      {todos.map((message) => <Item key={message} message={message} />)}    </ul>\n  );\n}
\n

JavaScript-выражения могут быть использованы вместе с другими типами дочерних компонентов. Они могут рассматриваться как альтернатива шаблонным строкам:

\n
function Hello(props) {\n  return <div>Привет, {props.addressee}!</div>;}
\n

Функции как дочерние компоненты

\n

Обычно JavaScript-выражения, вставленные в JSX, будут приведены к строке, React-элементу или списку из всего этого. Тем не менее, props.children работает так же, как и любой другой проп, поэтому в него можно передавать любые типы данных, а не только те, которые React знает как рендерить. К примеру, если у вас есть пользовательский компонент, можно было бы передать колбэк в props.children:

\n
// Вызывает колбэк numTimes раз для создания повторяющего компонента\nfunction Repeat(props) {\n  let items = [];\n  for (let i = 0; i < props.numTimes; i++) {    items.push(props.children(i));\n  }\n  return <div>{items}</div>;\n}\n\nfunction ListOfTenThings() {\n  return (\n    <Repeat numTimes={10}>\n      {(index) => <div key={index}>Это элемент списка с ключом {index}</div>}    </Repeat>\n  );\n}
\n

Дочерние компоненты, передаваемые пользовательскому компоненту, могут быть чем угодно с тем условием, что компонент преобразует их во что-то, что React сможет понять и отрендерить. Следующий пример редко встречается, но им можно воспользоваться, если необходимо расширить возможности JSX.

\n

Логические значения, null и undefined игнорируются

\n

Значения false, null, undefined и true — валидные дочерние компоненты. Просто они не рендерятся. Эти JSX-выражения будут рендерить одно и то же:

\n
<div />\n\n<div></div>\n\n<div>{false}</div>\n\n<div>{null}</div>\n\n<div>{undefined}</div>\n\n<div>{true}</div>
\n

Этот подход может быть полезным для рендера по условию. Вот пример, где JSX рендерит <Header />, если showHeader равняется true:

\n
<div>\n  {showHeader && <Header />}  <Content />\n</div>
\n

Есть один нюанс в том, что React будет рендерить «ложные» (falsy) значения, такие как число 0. Код ниже ведёт себя не так, как вы могли ожидать, так как 0 будет отображён, если массив props.messages пуст:

\n
<div>\n  {props.messages.length &&    <MessageList messages={props.messages} />\n  }\n</div>
\n

Чтобы исправить это, убедитесь что выражение перед оператором && всегда является boolean:

\n
<div>\n  {props.messages.length > 0 &&    <MessageList messages={props.messages} />\n  }\n</div>
\n

И наоборот, если вы хотите, чтобы такие значения как false, true, null или undefined отрисовались, то сначала вы должны преобразовать их в строку:

\n
<div>\n  Моя переменная JavaScript - {String(myVariable)}.</div>
","frontmatter":{"title":"JSX в деталях","next":null,"prev":null},"fields":{"path":"content/docs/jsx-in-depth.md","slug":"docs/jsx-in-depth.html"}}},"pageContext":{"slug":"docs/jsx-in-depth.html"}},"staticQueryHashes":[]}