响应中

Question

我在反应库中有一个名为Button的组件，并希望进一步扩展其功能。以下是我写的代码。

import React from 'react';
import { Button } from 'reactstrap';

export class Button extends React.Component {

    render () {
        return (
          <Button color="primary" className="Button">primary</Button>
        );
    }

}

我想使用与已定义组件相同的名称。问题是，当我运行应用程序时，我收到一个错误说，

Uncaught Error: Module build failed: C:/Users/dimal/Documents/GitHub/theme-wso2/module/components/MaterialButton.js: Duplicate declaration "Button"

如何导入我想用其他名称扩展的组件？据我所知，如果我重命名该组件，这个问题就会消失！我对么？

Answer 1

您可以将Button从reactstrap命名为差异名称。要实现这一点，写下类似于下面的内容

import { Button as BootStrapButton } from 'reactstrap';

现在在BootStrapButton使用button的地方使用reactstrap。