在没有导入的情况下导出组件时出错

IT技术 javascript reactjs ecmascript-6
2021-05-14 06:50:54

以下是我的文件:

定价.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';

主程序

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'中找不到导出'默认'(导入为'定价')

1个回答

您可以选择以下任何选项

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

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

否则你需要default像这样导出组件

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

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

export { Pricing };
export default Pricing;

并像使用它一样

export { Pricing }  from './Pricing';

如果您希望将 Pricing 组件作为默认导出从您的 index.js导出,您可以编写

export {default} from './Pricing';