Question

我是React.js的新手，我一直在尝试找出下面的代码块A和代码块B的真正区别。为什么代码块B的类定义以关键字'export'开头但在底部仍在导出默认产品？

代码块A：

import React, { Component } from 'react';

class Products extends Component {
    render() {
       return (
          //bla, bla, bla
       )
    }
}

export default Products;

代码块B：

import React, { Component } from 'react';

export class Products extends Component {
    render() {
       return (
          //bla, bla, bla
       )
    }
}

export default Products;

Answer 1

export class Foo
export class Bar

让我们导入单个对象，例如

import { Foo, Bar } from '../someFile.js'

而

export default Foo

让您将其导入为单个组件，例如

import Foo from '../someFile.js'

您可以将两个文件都放在同一个文件中，但是每个文件只能有1个默认导出，否则您可以根据需要导出尽可能多的组件。

编辑：

export class Products extends Component {
    render() {
       return (
          //bla, bla, bla
       )
    }
}

export class ProductCategories extends Component {
    render() {
       return (
          //bla, bla, bla
       )
    }
}

export default Products;

然后可以像

一样导入

import Products, { ProductCategories } from './myFile.js'

OR

import { Products, ProductCategories } from './myFile.js'

类componentName扩展Component {}和导出类componentName扩展Component {}有什么区别？

1 个答案: