Почему свельте ставит фигурные скобки на скаляры?

#svelte #svelte-3

Вопрос:

Например, это из документов:

 <canvas
    width={32}
    height={32}
></canvas>

Для какой цели здесь служат фигурные скобки?

1. Как бы выглядели не фигурные скобки?

2. Подобный этому width=32

3. Это отсутствие фигурной скобки, а не наличие фигурной скобки, которая не является фигурной. (т. Е. Термин «фигурная скобка» избыточен-просто глупый комментарий от меня по терминологии).

Ответ №1:

В примере, который вы показали, это не имеет значения. Следующие эквивалентны.

 <canvas width={32} height={32}></canvas>
<canvas width="32" height="32"></canvas>

Однако использование фигурных скобок приводит к тому, что Svelte интерпретирует его как выражение JavaScript. Это означает, что вы можете выполнять математику внутри фигурных скобок…

 <canvas width={32   8} height={32 - 8}></canvas>

…или замените его на переменную.

 <script>
  let size = 40;
</script>

<canvas width={size} height={size}></canvas>

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

1. Ты уверен в этом? Я говорил об этом с кем-то еще, и они сказали, что он приводит это к типу числа, тогда как без фигурных скобок он был бы приведен в виде строки.

2. В этом случае вы устанавливаете атрибуты, так что это не имеет значения. Вы правы в том, что без фигурных скобок вы передаете строку, а с фигурными скобками-число. Однако под капотом это использует функцию браузера setAttribute , которая в любом случае преобразует аргумент в строку.

3. Однако в некоторых случаях (например, в пользовательских элементах) вы фактически задаете свойство элемента. В этом случае имеет значение, используете ли вы фигурные скобки или нет, поскольку тип имеет значение. Например, если у вас есть <custom-button> элемент со required свойством, required={true} и required="true" они различны. С обычными элементами DOM вы обычно устанавливаете атрибуты, поэтому включение фигурных скобок или нет не влияет.