Javascript ReactJS：我怎样才能更模块化地使用道具类型&；物体的形状？

我喜欢为每个类显式指定我的所有道具类型

React.createClass({
  propTypes: {
    optionalArray: React.PropTypes.array,
    optionalBool: React.PropTypes.bool,
...

这源于阅读可重用组件：

但是，如果我有一个在许多类中使用的非常常见的对象，该怎么办？例如：

var MemoryForm = React.createClass({
  propTypes: {
    memory: React.PropTypes.shape({
      memoryID: React.PropTypes.number,
      content: React.PropTypes.string,
      date: React.PropTypes.object,
      dateStr: React.PropTypes.string,
      note: React.PropTypes.string
    }).isRequired,
    ...

var MemoriesArea = React.createClass({
  propTypes: {
    // The initial memory to fill the memory form with.
    formMemory: React.PropTypes.shape({ // <== shape used again
      memoryID: React.PropTypes.number,
      content: React.PropTypes.string,
      date: React.PropTypes.object,
      dateStr: React.PropTypes.string,
      note: React.PropTypes.string
    }).isRequired,
    // ...



var Playground = React.createClass({
  getInitialState: function() {
    var initVars = {
      // The initial memory to fill the memory form with.
      formMemory: {  // <== shape is used again.
        memoryID: 0,
        content: "",
        date: null,
        dateStr: "",
        note: ""
      }
    };
    return initVars;
  }
  //...

// File lib/PropTypeValues.js
import { PropTypes } from 'react';

export let MemoryPropTypes = PropTypes.shape({
  memoryID: PropTypes.number,
  content: PropTypes.string,
  date: PropTypes.object,
  dateStr: PropTypes.string,
  note: PropTypes.string
}).isRequired

var MemoryForm=React.createClass({
道具类型：{
记忆：React.PropTypes.shape({
memoryID:React.PropTypes.number，
内容：React.PropTypes.string，
日期：React.PropTypes.object，
dateStr:React.PropTypes.string，
注意：React.PropTypes.string
}).要求，
...
var MemoriesArea=React.createClass({
道具类型：{
//用于填充内存窗体的初始内存。
formMemory:React.PropTypes.shape（{/我会制作一个小模块来公开该功能。在一个普通的JS世界中，它看起来像这样：

let React = require('react');

module.exports = {
  propTypes() {
    return React.PropTypes.shape({
      memoryID: React.PropTypes.number,
      content: React.PropTypes.string,
      date: React.PropTypes.object,
      dateStr: React.PropTypes.string,
      note: React.PropTypes.string
    }).isRequired;
  },
  initialValues() {
    return {
      memoryID: 0,
      content: "",
      date: null,
      dateStr: "",
      note: ""
    };
  }
}

然后，您可以在如下组件中使用：

let memoryUtils = require('./memory-utils');

let MyComponent = React.createClass({
  propTypes: memoryUtils.propTypes(),
  render() {
    ...
  }
});

以及：

我也遇到了同样的问题，只是将值移动到一个单独的ES6模块。在您的示例中：

var MemoryForm = React.createClass({
  propTypes: {
    memory: React.PropTypes.shape({
      memoryID: React.PropTypes.number,
      content: React.PropTypes.string,
      date: React.PropTypes.object,
      dateStr: React.PropTypes.string,
      note: React.PropTypes.string
    }).isRequired,
    ...

var MemoriesArea = React.createClass({
  propTypes: {
    // The initial memory to fill the memory form with.
    formMemory: React.PropTypes.shape({ // <== shape used again
      memoryID: React.PropTypes.number,
      content: React.PropTypes.string,
      date: React.PropTypes.object,
      dateStr: React.PropTypes.string,
      note: React.PropTypes.string
    }).isRequired,
    // ...



var Playground = React.createClass({
  getInitialState: function() {
    var initVars = {
      // The initial memory to fill the memory form with.
      formMemory: {  // <== shape is used again.
        memoryID: 0,
        content: "",
        date: null,
        dateStr: "",
        note: ""
      }
    };
    return initVars;
  }
  //...

// File lib/PropTypeValues.js
import { PropTypes } from 'react';

export let MemoryPropTypes = PropTypes.shape({
  memoryID: PropTypes.number,
  content: PropTypes.string,
  date: PropTypes.object,
  dateStr: PropTypes.string,
  note: PropTypes.string
}).isRequired

然后在客户端代码中：

// MemoryForm.jsx
import { MemoryPropTypes } from './lib/PropTypeValues'
import React from 'react';

class MemoryForm extends React.Component {
  static propTypes: {
    memory: MemoryPropTypes,
    // ...
  };
}

希望这能有所帮助。
这很巧妙。但是如何控制添加/删除isRequired？看起来我关心的是eslint插件react-中的一个bug。您可以添加
MemoryPropTypes.isRequired
，但需要关闭eslint（至少现在是这样）。插入此注释
//eslint在前一行上方禁用下一行react/no typos
。我想如果您需要
memoryID
或任何其他嵌套的PropType，您必须在
lib/PropTypeValues.js
文件中创建一个全新的PropType，对吗？您考虑过接受答案吗？