Можно ли использовать propTypes и defaultProps как статические реквизиты внутри класса React?

Вот как я это делал довольно долго:

export default class AttachmentCreator extends Component {
  render() {
    return <div>
      <RaisedButton primary label="Add Attachment" />
    </div>
  }
}

AttachmentCreator.propTypes = {
  id: PropTypes.string,
};

Но я видел, как люди это делали так:

export default class AttachmentCreator extends Component {
  static propTypes = {
    id: PropTypes.string,
  };

  render() {
    return <div>
      <RaisedButton primary label="Add Attachment" />
    </div>
  }
}

И на самом деле я видел, как люди устанавливают начальное состояние вне конструктора. Это хорошая практика? Это подслушивало меня, но я помню дискуссию где-то, где кто-то сказал, что настройка реквизита по умолчанию как статика - не очень хорошая идея - я просто не помню, почему.

Ответы

Ответ 1

не-функциональные свойства в настоящее время не поддерживаются для классов es2015. его предложение для es2016. второй способ значительно более удобен, но для поддержки синтаксиса потребуется плагин (theres очень распространенный плагин babel для него).

С другой стороны, рука, полная проектов с открытым исходным кодом, начинает обрабатывать proptypes, такие как интерфейсы TypeScript или ActionConstants, и фактически создавать отдельные папки/файлы, которые содержат различные типы поддержки компонентов и затем импортируются в компонент.

Итак, в общем, оба синтаксиса одобрены. но если вы хотите использовать строго ES2015, последний синтаксис пока не поддерживается в спецификации.

Ответ 2

Фактически, это точно так же с точки зрения производительности. React.JS - относительно новая технология, поэтому пока не ясно, что считается хорошей практикой или нет. Если вы хотите доверять кому-то, проверьте этот стиль AirBNB:

https://github.com/airbnb/javascript/tree/master/react#ordering

import React, { PropTypes } from 'react';

const propTypes = {
  id: PropTypes.number.isRequired,
  url: PropTypes.string.isRequired,
  text: PropTypes.string,
};

const defaultProps = {
  text: 'Hello World',
};

class Link extends React.Component {
  static methodsAreOk() {
    return true;
  }

  render() {
    return <a href={this.props.url} data-id={this.props.id}>{this.props.text}</a>
  }
}

Link.propTypes = propTypes;
Link.defaultProps = defaultProps;

export default Link;

Ответ 3

Если компонент не зависит от состояния, то есть он не изменяет его собственное состояние вообще, вы должны объявить его как компонент без состояния (export default function MyComponent(props)) и объявить propTypes снаружи.

Хорошая практика поместить в конструктор первоначальную декларацию состояния зависит от вас. В нашем проекте мы объявляем начальное состояние в componentWillMount() только потому, что нам не нравится шаблон super(props), который вы должны использовать с конструктором.