es6 中的大括号和反应

Question

我开始学习 react 和es6 。 我在导入部分看到了一些花括号。

import React,{Component} from 'react';

我注意到这段代码中的大括号是导入那些命名为导出的。

但我也在JSX部分看到了一些代码，比如：

render() {
  return (
    <div>
      <h1>Hello,wrold!</h1>
      <h2>It is {new Date().toLocaleTimeString()}</h2>
    </div>
  );
}

我很困惑，这个花括号与es6语法无关吗？ 或者他们有某种关系？

Answer 1

当我们导入某些东西时，我们需要记住这一点。 如果使用 default 关键字导出组件或模块，则不需要使用大括号，但如果不使用 default 关键字导出，则需要使用大括号。

前任：

export class Main extends Component{}

当您导入此组件时，您需要像这样导入。

import {Main} from 'filename';

但是当你创建一个组件并使用 default 关键字导出它时，你不需要使用花括号。

前任：

export default class Main extends Component{}

你可以像这样导入它

import Main from 'filename';

在组件或模块主体的情况下，我们使用大括号来集成 JSX 和 javascript 代码。

Answer 2

“在 HTML 中插入 JSX/ES 代码”

花括号中的部分像 javascript 代码一样处理，返回结果并插入到"It is"和"</h2"之间

Answer 3

ES6语法

import React, {Component} from 'react';

是用于导入 ES6 模块的语法示例 - 不要与对象解构混淆。 这些不相关但经常混淆，因为导入模仿浅层解构。

JSX 语法

<h2>It is {new Date().toLocaleTimeString()}</h2>

告诉 JSX 编译器将大括号内的任何内容解释为 javascript 而不是文本。

ES6 导入语法、对象解构和 JSX 花括号都不相关。