Что в react пишут в скобках {} в функции render?

Question

[yuriytkachenko]

Документация обьясняет для чего пишут код в функции render между { } довольно поверхностно. Там пишет что в фигурных скобках записывают код { } чтобы JSX понял что это JavaScript. Или пишут что в скобках можно записать JS выражение. Но выражения в моем понимании это что-то на подобии такого: a= b+c или a=b.
А я часто вижу что в фигурных скобках пишут просто одно слово и все. Вот примеры:

render() {
 
    return (
     <WeatherDisplay
          key={activePlace}                      // ВОТ ЗДЕСЬ
          zip={PLACES[activePlace].zip}  //ИЛИ ЗДЕСЬ 
        />
      </div>
    );
}

render() {
    const { isActive } = this.state;              // И ЕЩЕ

    return (
      <div>
        <button onClick={handleClick}>Try it</button>    // И ВОТ
        <div className={isActive ? 'mystyle' : ''}>    
          This is a DIV element.
        </div>
      </div>
    );
  }
}

Так что пишут между фигурными скобками?
Какие у вас варианты что туда пишут?
Это значения результата вычислений в функции?
Это ссылки на объекты?
Это ссылки на переменние над которыми ми провели манипуляции и теперь присвоили какому-то елементу новое значение?

Answer 1

[i1yas]

в моем понимании это что-то на подобии такого: a= b+c или a=b.

Выражение - это любая конструкция, которая вычисляется в значение. Одна переменная написанная просто так - это тоже выражение:

const a = 1;
a; // это выражение

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

Comments

[yuriytkachenko]

Спасибо большое!

пропсы реакта принимают строки

А можете привести маленький пример как пропс принимает строку? Может я это и видел когда-то но не обращал на это внимания.

Выражение - это любая конструкция, которая вычисляется в значение

тоесть смена значения обьектов(например смена состояния) или значение которое было получено в результате выполнения функции (например операции с аргументами функции или с локальными переменными в ее теле) - это выражения? А значит их нужно записивать в фигурные скобки в функции render?

[i1yas]

yuriytkachenko,

А можете привести маленький пример как пропс принимает строку? Может я это и видел когда-то но не обращал на это внимания.

Ну вот простейший пример

// компонент принимает пропс label
const MyComponent = ({ label }) => <div>{label}</div>

// передаем строку в label без фигурных скобок
<MyComponent label="test" />
// то же самое, что и
<MyComponent label={"test"} />
// однако для передачи значения другого типа, даже примитива (например, числа), понадобятся фигурные скобки
<MyComponent label={100} />

тоесть смена значения обьектов(например смена состояния)

Я так понимаю речь идет про оператор присвоения? Да, он возвращает значение.
Вот простая проверка

let a = 10;
console.log(a=5) // в консоль выведется 5

Т. е. выражение a = 5 вычислилось в число 5. Хотя так мутировать переменную прямо в вызове функции/при передачи в пропсы не стоит.

или значение которое было получено в результате выполнения функции (например операции с аргументами функции или с локальными переменными в ее теле) - это выражения?

Здесь не совсем понял.

В общем советую еще раз почитать что-такое выражения, а что такое операции (лучше читать на англ., гуглить expressions vs statements javascript). Например, почему при передачи в пропсах используется тернарный оператор, а не if

// так работает
<MyComponent label={cond ? "true branch" : "false brunch"} />

// не будет работать
<MyComponent label={if(cond) ...}

[yuriytkachenko]

i1yas,

<MyComponent label="test" />
// то же самое, что и
<MyComponent label={"test"} />

а вы как обычно пишете первый или второй вариант? как посоветуете писать? или не важно?

или значение которое было получено в результате выполнения функции (например операции с аргументами функции или с локальными переменными в ее теле) - это выражения?

Здесь не совсем понял.

ну функция ж может выполнить какую-то операцию с переменными, а потом возвратить значение. Тогда получается это тоже выражение а значит его можно вписать в { } в функцию render. Правильно?

[i1yas]

а вы как обычно пишете первый или второй вариант? как посоветуете писать? или не важно?

Большой разницы нет, это просто сделано для удобства. Я использую первый вариант.

ну функция ж может выполнить какую-то операцию с переменными, а потом возвратить значение. Тогда получается это тоже выражение а значит его можно вписать в { } в функцию render. Правильно?

Да, вызов функции можно передавать. Функция всегда возвращает значение.

Answer 2

[Сергей c0re]

Это jsx код который перед выполнением компилируется в JavaScript
См. JSX — подробности

Answer 3

[0xD34F]

Но выражения в моем понимании это...

Понятно.

Забудьте про react на ближайшие полгода и марш изучать js.

Comments

[yuriytkachenko]

а я и продолжаю изучать JS)
а теперь что пишут на ресурсах:
Выражения в JavaScript представляют собой комбинации операндов и операторов.
и картинка которая все обьясняет:
https://html5book.ru/wp-content/uploads/2015/06/ex...
По-моему я все правильно написал)
вы чего?)

[0xD34F]

yuriytkachenko, это вы чего? Какой к чёрту реакт, если язык ни хрена не знаете? Хотя... если ваша цель - стать говнокодером, то да, верной дорогой идёте.

[yuriytkachenko]

0xD34F, не сердитесь:) вы ведь тоже когда-то начинали) также вероятно задавали глупие вопросы)
я же просто хочу разобраться) наверное как раз таки говнокодеры не хотят разбираться) и не кого не слушают)

[0xD34F]

yuriytkachenko,

наверное как раз таки говнокодеры не хотят разбираться

Вот это прям про себя сказали. Не желаете разбираться с основами js, вместо этого тянете ручонки в сторону react'а.