javascript - 在不导入的情况下导出组件时出错

Question

以下是我的文件:

定价.js

import React, { Component } from 'react';
import { Table } from 'react-bootstrap';

class Pricing extends Component {
    render() {
        return (
            <Table striped bordered condensed>
                <thead>
                <th></th>
                <th>Community</th>
                <th>Business</th>
                <th>Enterprise</th>
                </thead>
            <tbody>
            <tr>
                <td>Cost</td>
                <td>Free</td>
                <td>Free</td>
                <td>Free</td>
            </tr>
            </tbody>
            </Table>
        );
    }
}

export default Pricing;

索引.js

export { Pricing }  from './Pricing';

主要.js

import React from 'react';
import { Switch, Route } from 'react-router-dom';
import Pricing from '../../pages/Pricing';

const Main = () => (
    <main>
        <Switch>
            <Route path='/pricing' component={Pricing}/>
        </Switch>
    </main>
)

export default Main;

我收到以下错误:

35:70-77 “在‘../../pages/Pricing’中找不到导出‘默认’(导入为‘定价’)

Answer 1

您可以选择以下任一选项

首先从您的index.js 文件中导入然后导出定价组件

import Pricing from './Pricing'
export { Pricing } 

否则您需要像这样导出默认组件

export { default as Pricing }  from './Pricing';

或将导出更改为 Pricing.js 中的命名导出

export { Pricing };
export default Pricing;

像这样使用它

export { Pricing }  from './Pricing';

如果您希望从您的 index.js 中将定价组件导出为默认导出，您可以编写

export {default} from './Pricing';