0

У меня есть по сути два компонента с одной и той же логикой в методе componentWillReseiveProps и в некоторых методах еще Как мне применить наследование или как избежать дублирования логики?

2
  • Старайтесь искать ответ прежде чем задачать вопрос stackoverflow.com/a/35678424/4882290 13 апр 2018 в 5:51
  • @ДмитрийЗаварзин, если есть ответ на ruSO - отправь тревогу на дубликат. Если есть на enSO - переведи ответ, не забыв поставить ссылку на источник, и все остальные такие же вопросы будут закрываться как дубликат
    – Grundy
    13 апр 2018 в 10:50

1 ответ 1

3

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

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

  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, в отдельный класс

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.