在不导入的情况下导出组件时出错 [英] Error Exporting a component without importing

问题描述

以下是我的文件:

Pricing.js

Pricing.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;

index.js

export { Pricing }  from './Pricing';

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

35:70-77 "export 'default' (imported as 'Pricing') was not found in '../../pages/Pricing'

推荐答案

您可以采用以下任一选项

You can take any of the below options

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

First import and then export the pricing component from your index.js file

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

，否则您需要导出default组件，例如

or else you need to export the default component like

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

，或将导出更改为Pricing.js

or change the export to be a named export in Pricing.js

export { Pricing };
export default Pricing;

并像使用它

export { Pricing }  from './Pricing';

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

I you wish to export the Pricing component as a default export from your index.js you could just write

export {default} from './Pricing';

这篇关于在不导入的情况下导出组件时出错的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！