在反应中扩展已经定义的组件答案

【问题标题】：Extending an already defined component in react在反应中扩展已经定义的组件
【发布时间】：2017-10-25 05:37:19
【问题描述】：

我在 react 库中有一个名为 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"

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

【问题讨论】：

来自 React 文档：“在 Facebook，我们在数以千计的组件中使用 React，我们还没有发现任何建议创建组件继承层次结构的用例。道具和组合为您提供了所有您需要以明确且安全的方式自定义组件的外观和行为所需的灵活性。” - reactjs.org/docs/composition-vs-inheritance.html
这实际上是正确的答案。如果必须，创建一个全新的组件。制作组件继承层次结构只会在以后引起问题。

标签： reactjs components

【解决方案1】：

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

import { Button as BootStrapButton } from 'reactstrap';

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

【讨论】：

这可以做 OP 要求做的事情，但 OP 不应该做 OP 要求做的事情。