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的作用完全相同，作为类的静态属性。

¹静态意思是“不变”因为属性不会根据实例而改变，所以所有实例都是相同的，因为它不仅仅与一个实例相关联。

Answer 2

PropTypes是一个特定于React的API。这是一种告诉React对传递给组件的属性执行基本运行时类型检查的方法。在您的示例中，您说Greeting组件可以采用string类型的name属性，但这不是必需的。

定义此特殊propTypes属性的方式并不特定于React，但它只是一个ES6静态类属性。它是与类声明本身（Greeting.propTypes）相关联的属性，不是类的实例（new Greeting().propTypes是undefined）。实际上你可以使用的newer ES7+ syntax是等价的：

class Greeting extends React.Component {
  static propTypes = {
    name: PropTypes.string
  };
  render() { }
}
console.log(Greeting.propTypes) // { name: ... }

Answer 3

声明/定义一个类，然后实例化某个类的对象。

一个类的属性的名称是什么？

3 个答案: