Class 将propTypes和defaultProps作为React类中的静态道具放置是否可以？

这是我已经做了很长一段时间的方式：

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

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

导出默认类AttachmentCreator扩展组件{
render（）{
返回
}
}
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>
  }
}

导出默认类AttachmentCreator扩展组件{
静态类型={
id:PropTypes.string，
};
render（）{
返回
}
}

---

事实上，我也见过有人在构造函数之外设置初始状态。这是好的做法吗？这一直困扰着我，但我记得在某个地方的一次讨论中，有人说将默认道具设置为静态道具不是一个好主意-我只是不记得为什么。

事实上，在性能方面完全一样。React.JS是一项相对较新的技术，因此目前还不清楚哪些是好的做法，哪些不是。如果您想信任某人，请查看此AirBNB的样式指南：

import React，{PropTypes}来自'React'；
常量属性类型={
id:PropTypes.number.isRequired，
url:PropTypes.string.isRequired，
text:PropTypes.string，
};
const defaultProps={
文字：“你好，世界”，
};
类链接扩展了React.Component{
静态方法REOK（）{
返回true；
}
render（）{
返回
}
}
Link.propTypes=propTypes；
Link.defaultProps=defaultProps；
导出默认链接如果组件是无状态的，这意味着它根本不会更改自己的状态，则应将其声明为无状态组件（
导出默认函数MyComponent（props）
），并在外部声明
propTypes
）

将初始状态声明放在构造函数中是否是好的实践取决于您。在我们的项目中，我们在
componentWillMount（）
中声明初始状态，只是因为我们不喜欢必须与构造函数一起使用的
super（props）
样板文件。
es2015类当前不支持非函数属性。这是es2016的提案。第二种方法要方便得多，但是需要一个插件来支持语法（）

另一方面，一手又一手的开源项目开始将PropType视为TypeScript接口或ActionConstants，并实际创建包含各种组件prop类型的单独文件夹/文件，然后导入到组件中

总之，这两种语法都可以使用。但是如果您只想严格使用ES2015，规范中还不支持后一种语法。
哦，是的，巴贝尔（或其他Transpiler）完全合法
…当它被传送到这里的时候

class DataLoader extends React.Component {}

DataLoader.propTypes = {
  onFinishedLoading: PropTypes.func
};

DataLoader.defaultProps = {
  onFinishedLoading: () => {}
};

静态字段作为属性在后台的类对象上传输。

此外，直接在类主体中分配状态或其他属性会被传递到构造函数中。
您已经询问了静态getter，但是您的示例是一个静态类属性，您想知道这两个属性吗？抱歉，静态类属性。在使用实验性功能之后，我想我更倾向于错误地选择一个更稳定的方案。Airbnb的风格从来没有误导过我。对不起，但是分离propTypes声明有什么意义优势是什么？在我的例子中，其实没有优势，这只是一种自以为是的声明方式。但是，如果您可能希望跨组件重用数据结构，并且不希望在每个组件中重复propTypes声明，那么它可能非常有用：）2020年，w/React 16+和目标环境中可用的扩展语法（或polyfilled），
Component.propTypes={some:'val'，…Related.propTypes，nestedChildProps:{…NestedChild.propTypes}，override:'val'}
和整个厨房水槽在运行时都能完全满足您的期望。过梁已经变得很好，但即使在今天，您也必须在这里接受折衷。
class DataLoader extends React.Component {}

DataLoader.propTypes = {
  onFinishedLoading: PropTypes.func
};

DataLoader.defaultProps = {
  onFinishedLoading: () => {}
};