扩展react中已经定义的组件

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

您可以将Buttonfrom命名reactstrap为 diff 名称。为了实现这一点，请编写类似于下面的内容

import { Button as BootStrapButton } from 'reactstrap';

现在BootStrapButton在您想使用buttonfrom 的地方使用reactstrap。