Question

我正在学习React Native，只是对第一行导入中的括号感到好奇

import React, { Component } from 'react';
import { AppRegistry, Text } from 'react-native';

class HelloWorldApp extends Component {
  render() {
    return (
      <Text>Hello world</Text>
    );
  }
}

AppRegistry.registerComponent('HelloWorldApp', () => HelloWorldApp);

为什么用{}而不是React包装Component？

Answer 1

React是默认导出（每个模块只能有一个）。可以像这样导入默认导出：

import React from "react";

Component是名为的导出（可能有很多这样的导出）。命名导出的导入方式如下：

import { Component } from "react";

你所看到的是这两件事都是在同一条线上导入的。

default导出无处不在，因此仍需要导入。

请注意，React需要导入的原因是因为JSX转换为JS的方式 - React需要可用，因此<Text>可以转换为{{1} }}

Answer 2

我认为这只是缩短下一次调用的问题，因为Component是React的子类，因此你可以将React作为默认值使用它。和组件作为您使用的单个班级。顺便说一下，当你想要一些特定的方法或类时，你可以在导入中使用大括号，这就是名为export的东西。这里有更好的解释。 Having both named exports and a default export in a module

import React from 'react';
import Navbar from 'react-bootstrap/lib/Navbar';

export default class MyNavbar extends React.Component {
    render(){
      return (
        <Navbar className="navbar-dark" fluid>
        ...
        </Navbar>
      );
    }
}

围绕导入ES6的括号

2 个答案: