Как инициализировать состояние при расширении компонента? - PullRequest
Новая
       9

Как инициализировать состояние при расширении компонента?

0 голосов
/ 13 апреля 2020

У меня есть компонент с именем ErrorComponent, состояние которого инициализируется в его конструкторе.

Однако теперь я хочу создать новый класс с именем BaseForm, который расширяется от ErrorComponent.

Но если я сделаю 

export default class BaseForm extends ErrorComponent {
    constructor(props) {
            super(props);
            this.setState({
                reason: null
            });

, он кричит на меня и говорит, что я не должен использовать setState в конструкторе.

И если я сделаю 

export default class BaseForm extends ErrorComponent {
    constructor(props) {
            super(props);
            this.state = {
                reason: null
            };

Кажется, он перезаписывает состояние из конструктора ErrorComponent. Как установить состояние, не переопределяя состояние из класса, из которого я расширяюсь?

Ответы [ 2 ]

2 голосов
/ 13 апреля 2020

Не следует использовать наследование в React до тех пор, пока требуемая функциональность не может быть достигнута с помощью композиции. это React Anti Pattern.

React имеет мощную модель композиции, и рекомендуется использовать композицию вместо наследования для повторного использования кода между компонентами.

Реквизит и композиция дают вам все гибкость, необходимая для точной и безопасной настройки внешнего вида и поведения компонента. Помните, что компоненты могут принимать произвольные реквизиты, включая примитивные значения, элементы React или функции.

Вы должны использовать его, как показано ниже.

ErrorComponent 

export default class ErrorComponent extends Component {
  constructor(props) {
    super(props);
    this.setState({...this.props.childState });
  }

  render() {
    return (
      <div>
        {this.props.children}
      </div>
    );
  }
}

А затем оберните BaseForm ErrorComponent. 

export default class BaseForm extends Component {
  constructor(props) {
    super(props);
    this.setState({
      reason: null
    });
  }

  render() {
    return (
      <ErrorComponent childState={this.state}>
        <div>
          some thing
      </div>
      </ErrorComponent>

    )
  }
}

Вы можете узнать больше о Состав против наследования в React

1 голос
/ 13 апреля 2020 
export default class BaseForm extends ErrorComponent {
    constructor(props) {
            super(props);
            this.state = Object.assign(this.state, {
                reason: null,
            });
...