Что означают фигурные скобки в JSX (React)?

Например, чтобы задать стиль в реакции, вы можете сделать

var css = {color: red}

<h1 style={css}>Hello world</h1>

Зачем вам нужны фигурные скобки вокруг css во втором фрагменте кода?

Ответ 1

Кудрявые фигурные скобки - это особый синтаксис, позволяющий парсеру JSX знать, что ему нужно интерпретировать содержимое между ними как JavaScript, а не строку.

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

var css = { color: red }

<h1 style="css">Hello world</h1>

JSX не знает, что вы использовали переменную css в атрибуте style вместо строки. И, поместив фигурные скобки вокруг переменной css, вы сообщаете парсеру "взять содержимое переменной css и поместить их здесь". (Технически его оценка содержания)

Этот процесс обычно называют "интерполяцией".

Ответ 2

Если вы не используете переменную css, JSX может выглядеть так:

<h1 style={ {color: 'red'} }>Hello world</h1>

Я думаю, вы путаетесь в двойных фигурных скобках.

чтобы вы знали, что фигурные скобки в JSX означают processing in a JavaScript way, поэтому внешние фигурные скобки используются именно для этой цели.

Но свойство style принимает object. Для объекта также нужна другая пара фигурных скобок. Это цель для внутренних.

Ответ 3

Вы помещаете фигурные скобки, когда хотите использовать значение переменной внутри "html" (так внутри части рендеринга). Это просто способ сообщить приложению принять значение переменной и поместить его туда, в отличие от слова.