Наследование в реакт?

Наследования между компонентами в реакте не приветствуется.

Здесь есть три варианта:

1. Передавать дублируемый код prop-сами

2. Выделить какой-то базовую компоненту и, передавая пропсы, создавать более специфичные компоненты. Пример из документации с Dialog и SignUpDialog:

   function Dialog(props) {
     return (
       <FancyBorder color="blue">
         <h1 className="Dialog-title">
           {props.title}
         </h1>
         <p className="Dialog-message">
           {props.message}
         </p>
         {props.children}
       </FancyBorder>
     );
   }
   class SignUpDialog extends React.Component {
     constructor(props) {
       super(props);
       this.handleChange = this.handleChange.bind(this);
       this.handleSignUp = this.handleSignUp.bind(this);
       this.state = {login: ''};
     }
     render() {
       return (
         <Dialog title="Mars Exploration Program"
                 message="How should we refer to you?">
           <input value={this.state.login}
                  onChange={this.handleChange} />
           <button onClick={this.handleSignUp}>
             Sign Me Up!
           </button>
         </Dialog>
       );
     }
     handleChange(e) {
       this.setState({login: e.target.value});
     }
     handleSignUp() {
       alert(`Welcome aboard, ${this.state.login}!`);
     }
   }
   

3. Вынести часто используемые операции, не связанные с UI, в отдельный класс