JSX в глубине

Последнее обновление 24 июля 2019 08:41:25 (UTC / GMT +8 часов)

script1adsense2code

script1adsense3code

По сути, JSX просто обеспечивает синтаксический сахар в процессе разработки. Код JSX:

<MyButton color="blue" shadowSize={2}>
  Click Me
</MyButton>
compiles into:
React.createElement(
  MyButton,
  {color: 'blue', shadowSize: 2},
  'Click Me'
)

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

<div className="sidebar" />
compiles into:
React.createElement(
  'div',
  {className: 'sidebar'},
  null
)

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

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

Реакция должна быть в поле зрения

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

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

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

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

Использование точечной нотации для типа JSX

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

import React from 'react';
const MyComponents = {
  DatePicker: function DatePicker(props) {
    return <div>Imagine a {props.color} datepicker here.</div>;
  }
}
function BlueDatePicker() {
  return <MyComponents.DatePicker color="blue" />;
}

Пользовательские компоненты должны быть заглавными

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

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

Например, этот код не будет работать должным образом:

import React from 'react';
// Wrong! This is a component and should have been capitalized:
function hello(props) {
  // Correct! This use of <div> is legitimate because div is a valid HTML tag:
  return <div>Hello {props.toWhat}</div>;
}
function HelloWorld() {
  // Wrong! React thinks <hello /> is an HTML tag because it's not capitalized:
  return <hello toWhat="World" />;
}
To fix this, we will rename hello to Hello and use <Hello /> when referring to it:
import React from 'react';
// Correct! This is a component and should be capitalized:
function Hello(props) {
  // Correct! This use of <div> is legitimate because div is a valid HTML tag:
  return <div>Hello {props.toWhat}</div>;
}
function HelloWorld() {
  // Correc</div></div>t! React knows <Hello /> is a component because it's capitalized.
  return <Hello toWhat="World" />;
}

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

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

import React from 'react';
import { PhotoStory, VideoStory } from './stories';
const components = {
  photo: PhotoStory,
  video: VideoStory
};
function Story(props) {
  // Wrong! JSX type can't be an expression.
  return <components[props.storyType] story={props.story} />;
}
To fix this, we will assign the type to a capitalized variable first:
import React from 'react';
import { PhotoStory, VideoStory } from './stories';
const components = {
  photo: PhotoStory,
  video: VideoStory
};
function Story(props) {
  // Correct! JSX type can be a capitalized variable.
  const SpecificStory = components[props.storyType];
  return <SpecificStory story={props.story} />;
}

Реквизит в JSX

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

Выражения JavaScript как реквизит

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

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

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

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

function NumberDescriber(props) {
  let description;
  if (props.number % 2 == 0) {
    description = <strong>even</strong>;
  } else {
    description = <i>odd</i>;
  }
  return <div>{props.number} is an {description} number</div>;
}

Реквизиты по умолчанию "True"

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

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

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

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

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

function App1() {
  return <Greeting firstName="Ben" lastName="Hector" />;
}
function App2() {
  const props = {firstName: 'Ben', lastName: 'Hector'};
  return <Greeting {...props} />;
}

Дети в JSX

В выражениях JSX, которые содержат как открывающий тег, так и закрывающий тег, содержимое между этими тегами передается в виде специального объекта prop: props.children. Есть несколько разных способов передать детей:

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

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

<MyComponent>Hello world!</MyComponent>

Это допустимый JSX, и props.children в MyComponent будет просто строкой «Hello world!».

JSX Дети

Вы можете предоставить больше элементов JSX в качестве дочерних. Это полезно для отображения вложенных компонентов:

<MyContainer>
  <MyFirstComponent />
  <MySecondComponent />
</MyContainer>

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

<div>
  Here is a list:
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
  </ul>
</div>

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

render() {
  // No need to wrap list items in an extra element!
  return [
    // Don't forget the keys :)
    <li key="A">First item</li>,
    <li key="B">Second item</li>,
    <li key="C">Third item</li>,
  ];
}