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 that you have read and understand our privacy policy and code of conduct.

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