Стрелка в одну строку работает без скобок - не может быть точка с запятой?

Question

Я новичок в синтаксисе React и ES6, и мне показалось интересным, что если я напишу:

return <input onChange={event => console.log(event.target.value);} />;

Это не будет работать.Я получаю сообщение об ошибке «Не удается найти модуль».

Но если я удалю точку с запятой в функции стрелки:

return <input onChange={event => console.log(event.target.value)} />;

Работает просто отлично.И если я сохранил точку с запятой, но добавил фигурные скобки, вот так:

return <input onChange={event => { console.log(event.target.value); }} />;

Это тоже работает.В чем причина того, что первый пример не работает?

Answer 1

Чтобы правильно понять, почему это так, давайте удостоверимся, что мы знаем разницу между выражением и блоком .

на самом базовом уровне. выражение - это фрагмент кода, представляющий какое-либо значение.Итак, 123, a + b + c, calculateSomething(), это все выражения.Выражения не включают в себя точки с запятой.

A block в JS - это список выражений.Эти выражения заключены в фигурные скобки { } и разделены точками с запятой.

Теперь вернемся к функции стрелки.Функция стрелки может иметь две формы:

(some, args) => <an expression>
(some, args) => { <an expression>; <an expression>; ... }

Обратите внимание, что первая форма принимает выражение , одну.Точки с запятой должны быть только, если вы используете блок , как во второй форме.

JSX работает так:

<input onChange={ <an expression> } />

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

Функция стрелки - это выражение.Итак, если бы вы поставили здесь точку с запятой ...

<input onChange={ () => 'hello' ; } />

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