时间戳

首页 > 解决方案 > es6中的花括号并做出反应

javascript - es6中的花括号并做出反应

问题描述

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

import React,{Component} from 'react';

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

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

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

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

标签： javascriptreactjs

解决方案

当我们导入一些东西时，我们需要记住这一点。如果使用 default 关键字导出组件或模块，则不需要使用花括号，但如果在没有 default 关键字的情况下导出组件或模块，则需要使用花括号。

前任：

export class Main extends Component{}

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

import {Main} from 'filename';

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

前任：

export default class Main extends Component{}

你可以像这样导入它

import Main from 'filename';

对于组件或模块体，我们使用花括号来集成 JSX 和 javascript 代码。

推荐阅读