一个属性的名称是什么？

Question

我正在查看React文档,我遇到了这段代码.

import PropTypes from 'prop-types';

class Greeting extends React.Component {
  render() {
    return (
      <h1>Hello, {this.props.name}</h1>
    );
  }
}

Greeting.propTypes = {
  name: PropTypes.string
};

是否有一个特定的名称,他们在这里做什么,他们propTypes在课堂上创建一个对象？

这只是一个React的东西,还是可以在任何ES6代码中完成？

为什么我们不能只propTypes在类本身内设置一个变量,为什么它必须来到类外？

Answer 1

那是因为propTypes是类的静态¹属性,不与类的某个实例相关联,而是与类本身相关联.React的prop类型检查将propTypes某个组件作为组件类的静态属性进行查找.这不是课堂上的课程prototype,而是课程本身.

如果你要在类中声明它,它将是一个实例属性:

class Greeting extends React.Component {
  get propTypes() { //Not static!
    ...
  }

  render() {
    return (
      <h1>Hello, {this.props.name}</h1>
    );
  }
}  

Greeting然后每个组件都具有该属性,propTypes并且React将无法正确地检查道具.您可以使用静态getter并将其声明为类的静态属性,但:

static get propTypes() {
  ...
}

它在课外的原因是基于偏好.静态属性和getter可以在ES2015(或ES6)代码中的任何位置使用.

在ECMAScript的未来版本中,您可以声明类属性.您现在可以使用Babel和transform-class-properties插件的类属性(也在stage-2预设中):

class Greeting extends React.Component {
  static propTypes = {
    ...
  }
}

这是语法糖,与静态getter的作用完全相同,作为类的静态属性.

¹静态意义"不变"因为属性不会根据实例而改变,所以它在所有实例中都是相同的,因为它不仅仅与一个实例相关联.