Question

我开始学习反应和 es6 。我在 import 部分看到了花括号。

import React,{Component} from 'react';

我注意到这段代码中的花括号是用来导入名为export的括号。

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

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

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

Answer 1

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

例如：

export class Main extends Component{}

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

import {Main} from 'filename';

但是，当您创建一个组件并使用默认关键字将其导出时，则不需要使用花括号。

例如：

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大括号都没有关系。

es6中的花括号并作出反应

3 个答案: