Фигурные скобки в es6 и реагировать
Начинаю учиться реагировать и es6. Я видел фигурные скобки в части Импортировать.
import React,{Component} from 'react';
Я заметил, что фигурные скобки в этом коде предназначены для импорта названий экспорта.
Но я также видел код в части JSX, например:
render() {
return (
<div>
<h1>Hello,wrold!</h1>
<h2>It is {new Date().toLocaleTimeString()}</h2>
</div>
);
}
Я запутался, разве эти фигурные скобки не имеют ничего общего с синтаксисом es6? или они имеют какое-то отношение?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Чтобы «вставить код JSX / ES в HTML»
Часть фигурных скобок обрабатывается как код javascript, и их результат возвращается и вставляется между "It is" и "</h2".
Синтаксис ES6
import React, {Component} from 'react';
Это пример синтаксиса, используемого для импорта модулей ES6 - не путать с деструктуризацией объекта. Они не связаны между собой, но их часто путают, поскольку импорт имитирует неглубокую деструктуризацию.
Синтаксис JSX
<h2>It is {new Date().toLocaleTimeString()}</h2>
Сообщает компилятору JSX интерпретировать все, что находится внутри фигурных скобок, как javascript вместо текста.
Ни синтаксис импорта ES6, ни деструктуризация объекта, ни фигурные скобки JSX не связаны.
Когда мы что-то импортируем, мы должны помнить об этом. Если компонент или модуль экспортируется с ключевым словом по умолчанию, вам не нужно использовать фигурные скобки, но если он экспортируется без ключевого слова по умолчанию, вам нужно использовать фигурные скобки.
бывший:
export class Main extends Component{}
когда вы импортируете этот компонент, вам нужно импортировать его вот так.
import {Main} from 'filename';
Но когда вы создаете компонент и экспортируете его с ключевым словом по умолчанию, вам не нужно использовать фигурные скобки.
бывший:
export default class Main extends Component{}
вы можете импортировать это так
import Main from 'filename';
А в случае тела компонента или модуля мы используем фигурные скобки для интеграции кода JSX и javascript.
Они не имеют отношения к ES6. Это встроенные разделители выражений JavaScript, обрабатываемые транспиляторами JSX, такими как Babel, как простые выражения JavaScript.