Question

以下是我的文件：

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'中找到

Answer 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';

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

export {default} from './Pricing';

错误导出组件而不导入

1 个答案: