Изучите подробное руководство по JSX

Прежде чем вы начнете, обратите внимание, что это руководство для начинающих, которое охватывает концепции, которые я классифицирую как «Основы JSX». Это не полное руководство по изучению JSX, а полное введение в JSX.

JSX означает JavaScript XML. JSX позволяет нам писать HTML внутри React. JSX упрощает написание и добавление HTML в React. Для использования JSX вам необходимо заключить его в фигурные скобки «{}». Это то же самое, что и при добавлении функций к атрибутам.

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

JSX-код:

React.createElement(
MyButton, {
color: “blue”,
shadowSize: 2,
},
“Click Me”
)

У нас есть еще один способ добавить HTML внутрь React.

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

React.createElement(
‘div’,{
className: ‘sidebar’
})

Подробнее о типе элемента React.

Элемент React — это то, что возвращается из компонентов. Это объект, который виртуально описывает узлы DOM, которые представляет компонент. В функциональном компоненте этот элемент является объектом, который возвращает функция.

React должен быть в области действия

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

Например:

Import React from ‘react’;
Import customButtom from ‘./CustomButton’;
Const warningButton(){
Return(<CustomButton color: ‘red’ />; )
}

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

Вы также можете ссылаться на компонент React, используя точечную нотацию из JSX.

const CardBody = ({ children }) => <div className='body'>{children}</div>;
const Card = (props) => (
<div className='card'>{props.children}</div>
);
Card.Body = CardBody

затем используйте его как

<Card>
<Card.Body>
....

Реквизиты в JSX

У нас есть разные типы реквизита в JSX. Вы можете передать любое выражение javascript, используя реквизиты. Реквизит также окружен фигурными скобками.
В функциональном компоненте компоненты получают свойства точно так же, как обычный аргумент функции.

import React from "react";
import ReactDOM from "react-dom";
function App() {
return <Greeting name="Nathan" age={27} occupation="Software Developer" />;
}
function Greeting(props) {
return (
<p>
Hello! I'm {props.name}, a {props.age} years old {props.occupation}.
Pleased to meet you!
</p>
);
}
ReactDOM.render(<App />, document.getElementById("root"));

Повторное использование кода с реквизитами и состоянием

import React from "react";
import ReactDOM from "react-dom";
function App() {
return (
<div>
<Greeting name="Nathan" age={27} occupation="Software Developer" />
<Greeting name="Jane" age={24} occupation="Frontend Developer" />
</div>
);
}
function Greeting(props) {
return (
<p>
Hello! I'm {props.name}, a {props.age} years old {props.occupation}.
Pleased to meet you!

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

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

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

Дети в JSX

Строковые литералы. Вы можете поместить строку между открывающим и закрывающим тегами, и props.children будет просто этой строкой.
Дети JSX: вы можете предоставить больше элементов JSX в качестве дочерних элементов.
Выражения JavaScript. Любое выражение JavaScript можно передать как дочернее, заключив его в {}.
Функционирует как Дети.

Boolean, Null и Undefined игнорируются. False, Null, Undefined и True являются допустимыми дочерними элементами. Они просто не рендерятся. Эти выражения будут отображать одно и то же.

Это все о JSX. Спасибо за прочтение статьи. Надеюсь, тебе понравится. и кое-что новое из этого блога.

Изучите подробное руководство по JSX

Похожие вопросы