我们如何覆盖或扩展React.js中的组件

Question

我需要一些建议，我们为可以为特定客户定制的用户创建了一个应用程序。 例如，我们为客户A创建我们的应用，并假设我们有：一个蓝色按钮，其中包含文本“发送” 和字母图像靠近文字
然后，客户B说，他需要这样的按钮：红色按钮，其中带有文本“向我们发送电子邮件” 和箭头图像文字

这只是一个非常简单的示例，我们可以进行更多的更改并包含大量组件。

我们认为，要为客户A创建第一个默认应用程序，所有组件和其他内容都将存放在公用文件夹中，就像我们根本没有该应用程序一样。 然后，为客户B创建一个文件夹，我们将只放置覆盖组件，例如Button.js

我们需要帮助来了解如何从默认组件中正确覆盖或继承一个组件（对于我们而言就是按钮组件）？

Answer 1

在React中，您可以定义具有某些属性的组件。因此，可以创建可重用的组件，而不仅仅是将代码拆分成模块。 （您甚至可以将组件库打包为NPM发布，以进行更好的依赖性管理。）

使用组件时，只需提供这些属性。并且相同的组件呈现或表现不同。

参数化的组件（通过使用props）

export const Button = props => 
    <div>{props.text}</div>;

.button {
  // CSS styles here
}

.button--red {
  // CSS styles here
}

.button--icon-arrow {
  // CSS styles here
}

然后在某个地方使用组件：

<Button text="Email us" className="button button--red button--icon-arrow" />

派生组件（类继承）

首先，您定义基本组件<Button />。

然后，您从<AlertButton />派生<Button />并覆盖功能。

export class Button extends React.Component {
    render() {
        return <button onClick={this.onClick}>{this.props.text}</button>;
    }

    onClick = e => {
        console.log(e);
    };
}

export class AlertButton extends Button {
    onClick = e => {
        alert(5);
    };
}

然后，您可以以不同的方式分别使用这两个组件。

<Button text="console.log()" />
<AlertButton text="alert()" />

查看材料：

1. React Docs / Components and Props
2. CSS Tricks / BEM 101