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

Question

I need a piece of advice, we create an application for users that can be customized for a specific client. For example, we create our app for a customer A and let's imagine we have: a blue button with a text "Send" and a letter image near to the text
Then a customer B says, that he needs this button like this: red button with a text "Email us" and an arrow image near to the text

This is just a super simple example, we can have much more changes and with huge components.

We think this way, to create a first default app for customer A, all components and other stuff will be in common folders like we have only this app at all. Then to create a folder for the customer B, there we will put only override components, for example, Button.js

We need help to understand how should we to override or inherit properly a component (for our case a button component) from the default one?

Answer 1

In React you can define a component with some properties. So, it's possible to create reusable components, not just split your code into modules. (You can even pack your components library an publish as NPM package for better dependency management).

When you use the component, you just provide those properties. And the same component renders or behaves differently.

Parametrised component (by using props )

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

.button {
  // CSS styles here
}

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

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

Then you use your component somewhere:

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

Derived components (classes inheritance)

First, you define the base component <Button /> .

Then you derive <AlertButton /> from <Button /> and override the functionality.

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);
    };
}

Then you can use both components separately in different ways.

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

Check out the materials:

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