Рубрики
Без рубрики

JSX в реакции – объяснено примерами

JSX является одним из основных концепций реагирования. Поэтому, если вы хорошо понимаете, вы сможете написать лучший код REACT. В этой статье мы рассмотрим: что такое jsx в реакции и как использовать iThow jsx, преобразуется для реагирования .CREATELEEDEALHAT, что является выражением JSX и что

Автор оригинала: FreeCodeCamp Community Member.

JSX является одним из основных концепций реагирования. Поэтому, если вы хорошо понимаете, вы сможете написать лучший код REACT.

В этой статье мы рассмотрим:

  • Что такое JSX в реакции и как его использовать
  • Как JSX преобразуется в Отреагировать
  • Что такое выражение JSX и что мы можем написать внутри него
  • Общие вопросы в JSX

И многое другое. Так что давайте начнем.

Что такое JSX?

Посмотрите на следующий код:

const jsx = 
This is JSX

Это простой код JSX в реакции. Но браузер не понимает этого JSX, потому что это не допустимый код JavaScript. Это связано с тем, что мы присваиваем HTML-тег в переменной, которая не является строкой, а просто HTML-код.

Итак, чтобы преобразовать его в браузер понятный код JavaScript, мы используем инструмент, похожий на Бабел который является JavaScript Compiler/транспортер.

Вы можете настроить свою собственную конфигурацию Babel, используя WebPack, как я показываю в Эта статья Отказ Или вы можете использовать Create-React-App который внутренне использует Babel для преобразования JSX к JavaScript.

Мы можем использовать вышеупомянутый JSX в нашем React Code, как это:

class JSXDemo extends React.Component {
    render() {
        return 
This is JSX
;
    }
}

ReactDOM.render(, document.getElementById('root'));

Здесь мы возвращаем JSX из Jsxdemo Компонент и рендеринг того, что на экране с помощью Reactom.runder метод.

Вот a Код Sandbox Demo Отказ

Когда Babel выполняет вышеуказанный JSX, он преобразует его в следующий код:

class JSXDemo extends React.Component {
    render() {
        return React.createElement("h1", null, "This is JSX");
    }
}

Вот a Код Sandbox Demo Отказ

Как вы можете видеть в приведенном выше коде с песочницей, код все еще правильно печатает содержимое на экран, используя Rect.Createelement Отказ

Это был старый способ написания кода в реакции – но это утомительно написать Rect.Createelement Каждый раз, даже для добавления простого Div.

Итак, Rect React ввел адрес записи JSX, который делает код легко писать и понимать.

Что такое функция raction.createelement?

Каждый JSX преобразуется в Rect.Createelement Функция Вызов, что браузер понимает.

Rect.Createelement имеет следующий синтаксис:

React.createElement(type, [props], [...children])

Давайте посмотрим на параметры творчество функция.

  • Тип может быть тегом HTML, такая как H1, div или это может быть компонентом реагирования
  • реквизит атрибуты, которые вы хотите, чтобы элемент был
  • дети Содержит другие теги HTML или могут быть компонентом

Rect.Createelement Вызов также будет преобразован в представление объекта, как это:

{   
 type: 'h1',   
 props: {     
   children: 'This is JSX'   
 }
}

Вы можете увидеть это представление объекта, если вы назначите JSX какую-то локальную переменную и в систему, как показано ниже:

class JSXDemo extends React.Component {
    render() {
        const jsx = 
This is JSX
;
        console.log(jsx);
        return jsx;
    }
}

ReactDOM.render(, document.getElementById('root'));

Вот a Код Sandbox Demo Отказ

Вы увидите журнал, напечатанный, как показано ниже:

Теперь посмотрите на следующий код:

class JSXDemo extends React.Component {
  render() {
    const jsx = 
This is JSX
;
    console.log(jsx);
    return jsx;
  }
}

ReactDOM.render(, document.getElementById("root"));

Здесь мы использовали jsx, как это:

This is JSX

Итак, отреагируйте, преобразуют этот JSX к следующему коду:

React.createElement("h1", { id: "jsx" }, "This is JSX");

Если есть какие-либо атрибуты, добавленные в тег HTML, как в нашем случае, они будут переданы в качестве второго параметра для Rect.Createelement вызов. Представление объекта будет выглядеть так:

{ 
  type: 'h1', 
  props: { 
   id: 'jsx',
   children: 'This is JSX'
  } 
}

Вот a Код Sandbox Demo Отказ

Вы увидите журнал, напечатанный, как показано ниже:

Теперь давайте добавим некоторую сложность JSX, чтобы увидеть, как он преобразуется в Rect.Createelement вызов.

class JSXDemo extends React.Component {
  handleOnClick = () => {
    console.log("clicked");
  };
  render() {
    return (
      
    );
  }
}

ReactDOM.render(, document.getElementById("root"));

Здесь мы добавили OnClick обработчик к кнопке.

Для вышеуказанного кода Rect.Createelement Звонок будет выглядеть так:

React.createElement("button", {
  id: "btn", 
  onClick: function() {}
}, "Click Here")

Вот a Код Sandbox Demo Отказ

Представление объекта будет выглядеть так:

Итак, от всех вышеуказанных примеров, ясно, что JSX преобразуется в Rect.Createelement Вызов, и он затем преобразуется в его представление объекта.

Если вы хотите увидеть JSX в Rect.Createelement Код преобразования, вы можете перейти к Это приложение который я создал в Эта статья Отказ Там вы можете написать код JSX слева и увидеть преобразованный код на правой стороне, как показано ниже:

Как вернуть сложный JSX

Посмотрите на следующий код:

import React from "react";
import ReactDOM from "react-dom";

const App = () => {
  return (
      
This is first JSX Element!

      
This is another JSX Element

  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(, rootElement);

Вот a Код Sandbox Demo Отказ

Здесь мы возвращаем два абзаца из компонента приложений. Но если вы запустите код, вы получите эту ошибку:

Мы получаем ошибку, потому что реагирование требует примыкающих элементов в родительской бирке.

Как мы видели,

Это первый элемент JSX!

будет преобразован в Rect.Createelement («P», NULL, «Это первый элемент JSX!») и

Это еще один элемент JSX

будет преобразован в Rect.Createelement («P», NULL, «Это еще один элемент JSX») Отказ

Конвертированный код будет выглядеть так:

import React from "react";
import ReactDOM from "react-dom";

const App = () => {
  return (
            React.createElement("p", null, "This is first JSX Element!"); React.createElement("p", null, "This is another JSX Element");
        );
};

const rootElement = document.getElementById("root");
ReactDOM.render(, rootElement);

Здесь мы возвращаем две вещи из Приложение Компонент, который не будет работать, потому что нет родительского элемента, чтобы обернуть их обоих.

Чтобы сделать это работать, очевидное решение – обернуть их обоих в некоторых родительском элементе, скорее всего, A Div как это:

import React from "react";
import ReactDOM from "react-dom";

const App = () => {
  return (
    

      
This is first JSX Element!

      
This is another JSX Element

    

  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(, rootElement);

Вот a Код Sandbox Demo Отказ

Но есть и другие способы сделать это работать.

Во-первых, вы можете попробовать вернуть его как массив, как показано ниже:

import React from "react";
import ReactDOM from "react-dom";

const App = () => {
  return (
    [
This is first JSX Element!
,
This is another JSX Element
]
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(, rootElement);

Вот a Код Sandbox Demo Отказ

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

Мы можем исправить это, добавив уникальный ключ для соседних элементов:

import React from "react";
import ReactDOM from "react-dom";

const App = () => {
  return (
    [
This is first JSX Element!
,
This is another JSX Element
]
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(, rootElement);

Вот a Код Sandbox Demo Отказ

Другой способ исправить это, используя Реагировать составная часть: 

import React from "react";
import ReactDOM from "react-dom";

const App = () => {
  return (
    
      
This is first JSX Element!

      
This is another JSX Element

    
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(, rootElement);

Вот a Код Sandbox Demo Отказ

Реагировать Добавляли в React версии 16.2, потому что мы всегда должны обернуть несколько соседних элементов в некотором метере (например, div) внутри каждого jsx, возвращаемого компонентом. Но это добавляет ненужные метки DIV.

Это нормально в большинстве случаев, но есть определенные случаи, когда это не в порядке.

Например, если мы используем Flexbox, то в структуре Flexbox есть специальные отношения родительских детей. И добавление DIV в середине упорно сохранить желаемую макет.

Итак, используя Реагировать исправляет эту проблему.

Как добавить комментарии к коду JSX

Если у вас есть строка кода, как это:

This is some text

И вы хотите добавить комментарий для этого кода, то вам нужно обернуть этот код в синтаксисе экспрессии JSX внутри /* и */ Символы комментарии, как это:

{/* 
This is some text
 */}

Совет: Вместо того, чтобы вручную набрать комментарий, вы можете использовать CMD +/ (Mac) или Ctrl +/ Клавиши ярлыка для добавления или удаления комментария.

Как добавить код JavaScript в JSX

До этого момента мы использовали только теги HTML как часть JSX. Но JSX становится более полезным, когда мы на самом деле добавляем код JavaScript внутри него.

Чтобы добавить код JavaScript внутри JSX, нам нужно написать его в курчавых скобках, как это:

const App = () => {
 const number = 10;
 return (
  

   
Number: {number}

  

 );
};

Вот a Код Sandbox Demo Отказ

Таким образом, часто этот синтаксис использования вьющихся кронштейнов известен как синтаксис экспрессии JSX.

Ниже приведены действительные вещи, которые вы можете иметь в выражении JSX:

  • Строка, как “привет”
  • Число, как 10
  • Массив, как [1, 2, 4, 5]
  • Свойство объекта, которое будет оценивать до некоторой стоимости
  • Вызов функции, который возвращает некоторое значение, которое может быть JSX
  • Метод карты, который всегда возвращает новый массив
  • Сам jsx

Ниже приведены неверные вещи и не могут быть использованы в выражении JSX:

  • Для петли или во время петли или любой другой цикл
  • Переменная декларация
  • Декларация функции
  • Если состояние
  • Объект

Мы можем написать массивы в выражениях JSX, потому что

{[1, 2, 3, 4]}

окончательно преобразуется в

{1} {2} {3} {4}

при рендеринге (который может быть оказан без какой-либо проблемы).

В случае объекта неясно, как должен отображаться объект. Например, если он должен быть разделенными запятыми на пары клавишных пар или должны отображаться как JSON? Таким образом, вы получите ошибку, если вы попытаетесь отобразить объект в выражении JSX. Но вместо этого мы можем использовать свойства объекта.

Поэтому, если у вас есть логическое значение, и вы хотите отобразить его на пользовательском интерфейсе, вам нужно обернуть его в шаблоне ES6 Letteral Syntax, как это:

const App = () => {
  const isAdmin = true;
  return (
    

      
isAdmin is {`${isAdmin}`} 

    

  );
};

Вот a Код Sandbox Demo Отказ

Условные операторы в выражения JSX

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

{a > b ? "Greater" : "Smaller"}


{shouldShow && "Shown"}

Вот a Код Sandbox Demo Описывая различные способы написания выражений JSX.

Как устанавливать выражения JSX

Вы можете даже сделать вложенность выражений JSX, как это:

const App = () => {
  const number = 10;
  return (
    

      {number > 0 ? (
        
Number {number} is positive

      ) : (
        
Number {number} is Negative

      )}
    

  );
};

Вот a Код Sandbox Demo Отказ

Как добавить класс в JSX

Мы можем добавить атрибуты элементам JSX, например ID и Класс так же, как в HTML.

import React from "react";
import ReactDOM from "react-dom";

const App = () => {
  const id = "some-id";
  return (
    

      
This is a heading

      
This is another heading

    

  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(, rootElement);

Вот a Код Sandbox Demo Отказ

Обратите внимание, что в реакции нам нужно использовать классное значение вместо Класс Отказ

Это потому, что если вы используете Класс вместо классное значение , вы получите предупреждение в консоли, как показано ниже:

Вот a Код Sandbox Demo Отказ

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

Вот a Код Sandbox Demo Отказ

Как видите, объект реквизита имеет Класс недвижимость со значением Активный Отказ Но в JavaScript, Класс Зарезервированное ключевое слово, так что доступ к ropps.Class приведет к ошибке.

Вот почему реагировать решил использовать классное значение вместо Класс Отказ

Это использование классное значение вместо Класс Часто задаваемый вопрос в интервью на реагирование.

Вы можете найти все измененные и неизменные атрибуты здесь Отказ

Заключение

В этой статье мы видели, как использовать JSX в реакции. Вот некоторые основные вынос:

  • Каждый меток JSX преобразуется в Rect.Createelement Вызов и его представление объекта.
  • Выражения JSX, которые записываются внутри вьющихся скобок, позволяют только вещам, которые оценивают к некоторому значению, как строка, номер, метод MAP MAP и т. Д.
  • В реакции мы должны использовать классное значение вместо Класс Для добавления классов в HTML-элемент
  • Все имена атрибутов в реакции записываются в камеру.
  • undefined , null и логический не отображаются на UI при использовании внутри JSX.

Спасибо за прочтение!

Проверьте мой бесплатный Введение в React Router курс.

Кроме того, проверьте мой Овладение современным JavaScript Книга Чтобы узнать все последние функции ES6 + подробно, чтобы стать лучше на JavaScript и реагировать.

Подписаться на мой Еженедельная рассылка Чтобы вступить в 1000+ других подписчиков, чтобы получить удивительные советы, трюки, статьи и скидки непосредственно в вашем почтовом ящике.

Читайте ещё по теме: