Babel не переносит JSX-экземпляр функции стрелки

Question

мой уровень Javascript & React - новичок.

Мне нравится https://babeljs.io/repl, чтобы посмотреть, как мой JSX перенесен в более старую версию Javascript, и есть кое-что, чего я не делаюЯ не совсем понимаю.

Я пытаюсь использовать функцию со стрелкой и экземпляр этой функции:

const App = () => {
    return <div></div>;
}

<App></App>

, что выдает ошибку:

repl: Unexpected token (5:6)
  3 | }
  4 | 
> 5 | <App></App>
    |       ^

Обратите внимание, что нормальная функция AND и instance () работают нормально.ТОЛЬКО функция стрелки тоже работает нормально.Проблема возникает, когда я использую функцию со стрелкой и ее экземпляр JSX.

Спасибо !!

Answer 1

Проблема возникает, когда я использую функцию стрелки И ее экземпляр JSX.

В этом проблема.Для правильного анализа <App></App> должен быть однозначно идентифицирован как JSX.Это невозможно сделать, потому что точка с запятой после стрелки была пропущена.

Это должно быть :

const App = () => {
    return <div></div>;
};

<App></App>

Как уже упоминалось в другом ответе, синтаксис JSX обычно используется в ситуацияхкак ReactDOM.render(...), где оно может быть однозначно идентифицировано как выражение, поэтому в данном случае эта проблема не возникнет.

Answer 2

Обратите также внимание, что наличие <App></App> в области действия на уровне файла - будучи технически корректным - приведет к отбрасыванию значения, которое он создает, - компонент не будет подключен.Обычно для визуализации дерева компонентов React можно использовать метод рендеринга ReactDOM:

const root = document.getElementById("root");
ReactDOM.render(<App />, root)