Javascript 使用PropType检查嵌套对象属性

我想用flow注释以下内容：

type PropType = {
  content: Object
};

export const DialogContent = ({ content }: PropType) => (
  <div>
    <p className={cn('text-head')}>{content.h4}</p>
    <p className={cn('text-bottom')}>
      {content.p}
    </p>
  </div>
);

---

但是flow只是抱怨从来没有使用过

p

和

h4

。

所以你想发送一个

对象类型的道具，它必须具有
p
和
h4

如果不编写执行此检查的自定义函数，这是不可能的。为此，您需要声明您的
propTypes
，如下所示：

propTypes: {
  content: function(props, propName, componentName) {
    //do your validation here. 
    //Return an Error if something's wrong, otherwise don't return anything (or return null).
  }
}

官方文件是这样说的：

您还可以指定自定义验证器。它应该返回一个错误
对象，如果验证失败。不要
控制台。警告
或抛出[…]

在上阅读有关使用PropTypes进行类型检查的更多信息


演示
这是我准备的演示。对于您正在寻找的东西来说，这可能是过度的，也可能不是过度的，因为验证是相当广泛的。你可以挑选你需要的。下面针对您的
内容
的验证是（按顺序）：


验证道具
内容
是否通过

验证道具
内容
是否为
对象
验证道具
内容
的对象属性是否为
p
验证道具
内容
的对象属性为
h1
验证对象属性
content.p
是否为
字符串

验证对象属性
content.h1
是否为
字符串



var DialogContent=React.createClass({
道具类型：{
内容：函数（props、propName、componentName）{
如果（！props.content）{
返回新错误(
“'+componentName+'中未指定必需的属性''+propName+''
);
}else if（typeof props.content！=“object”）{
返回新错误(
提供给“`+componentName+``的类型为“`+typeof props.content+`的“无效的prop`'+propName+``应为“object`.”
);
}如果（！props.content.p）{
返回新错误(
“'+componentName+'中未指定对象''+propName+'所需的属性'p'
);
}否则如果（！props.content.h1）{
返回新错误(
“'+componentName+'中未指定对象''+propName+'所需的属性'h1'
);
}else if（typeof props.content.p！=“string”）{
返回新错误(
“提供给”`+componentName+``的类型为“`+typeof props.content.p+`的prop`+propName+`的对象属性'p`无效，应为'string'。”
);
}else if（typeof props.content.h1！=“字符串”）{
返回新错误(
“提供给”`+componentName+``的类型为“`+typeof props.content.h1+`的prop`+propName+`的对象属性'h1`无效，应为'string'。”
);
}
}
},
render:function（）{
返回我的对话框内容组件；
}
});
var obj={
p:“福”，
h1：“酒吧”
};
ReactDOM.render（，
document.getElementById（'容器'）
);
我知道这个问题和答案很古老，但我认为我们应该添加当前的标准类型检查方法，使用该方法更简单：

import PropTypes from 'prop-types';

class DialogContent extends React.Component {

  static propTypes = {
    content: PropTypes.shape({ p: PropTypes.string, h4: PropTypes.string })
  };

  render() {
    const { p, h4 } = this.props.content;

    return (
      <div>
        <p className='text-head'>{h4}</p>
        <p className='text-bottom'>
          {p}
        </p>
      </div>
    )
  }
}

export default DialogContent;

import PropTypes from 'prop-types';

class DialogContent extends React.Component {

  static propTypes = {
    content: PropTypes.shape({ p: PropTypes.string, h4: PropTypes.string })
  };

  render() {
    const { p, h4 } = this.props.content;

    return (
      <div>
        <p className='text-head'>{h4}</p>
        <p className='text-bottom'>
          {p}
        </p>
      </div>
    )
  }
}

export default DialogContent;

static propTypes = {
    content: PropTypes.shape({ p: PropTypes.string, h4: PropTypes.string }).isRequired
};