Например, чтобы задать стиль в реакции, вы можете сделать
var css = {color: red}
и
<h1 style={css}>Hello world</h1>
Зачем вам нужны фигурные скобки вокруг css во втором фрагменте кода?
Например, чтобы задать стиль в реакции, вы можете сделать
var css = {color: red}
и
<h1 style={css}>Hello world</h1>
Зачем вам нужны фигурные скобки вокруг css во втором фрагменте кода?
Кудрявые фигурные скобки - это особый синтаксис, позволяющий парсеру JSX знать, что ему нужно интерпретировать содержимое между ними как JavaScript, а не строку.
Вам нужны они, когда вы хотите использовать выражение JavaScript, например переменную или ссылку внутри JSX. Потому что, если вы используете стандартный синтаксис двойной цитаты, например:
var css = { color: red }
<h1 style="css">Hello world</h1>
JSX не знает, что вы использовали переменную css
в атрибуте style вместо строки. И, поместив фигурные скобки вокруг переменной css
, вы сообщаете парсеру "взять содержимое переменной css
и поместить их здесь". (Технически его оценка содержания)
Этот процесс обычно называют "интерполяцией".
Если вы не используете переменную css
, JSX может выглядеть так:
<h1 style={ {color: 'red'} }>Hello world</h1>
Я думаю, вы путаетесь в двойных фигурных скобках.
чтобы вы знали, что фигурные скобки в JSX означают processing in a JavaScript way
, поэтому внешние фигурные скобки используются именно для этой цели.
Но свойство style
принимает object
. Для объекта также нужна другая пара фигурных скобок. Это цель для внутренних.
Вы помещаете фигурные скобки, когда хотите использовать значение переменной внутри "html" (так внутри части рендеринга). Это просто способ сообщить приложению принять значение переменной и поместить его туда, в отличие от слова.