功能组件的PropTypes.instanceOf不起作用

时间:2019-07-20 04:51:04

标签: reactjs react-proptypes

我正在尝试将propTypes中的children设置为特定类型,因此当传递错误类型的子代时,它会发出警告,但是目前,即使说了{{1} }它会被完全忽略并接受其他类型。

我希望SortBy仅接受Option列表,但它会接收没有警告的本机html children: PropTypes.arrayOf(Option)

这是沙箱: https://codesandbox.io/s/sleepy-currying-fwdlq

这是代码:

sort-by.js

option

option.js

import React from 'react';
import PropTypes from 'prop-types';
import {Option} from './option';

const SortBy = ({children, onChange}) => (
  <select onChange={onChange}>
    <Option>---</Option>
    {children}
  </select>
);

SortBy.Option = Option;

export {
  SortBy,
};

SortBy.propTypes = {
  onChange: PropTypes.func.isRequired,
  children: PropTypes.arrayOf(Option).isRequired,
};

app.js

import React from 'react';
import PropTypes from 'prop-types';

export function Option({ children }) {
  return <option>{children}</option>;
}

Option.propTypes = {
  children: PropTypes.oneOf(['id', 'state', '---']).isRequired,
};

2 个答案:

答案 0 :(得分:0)

您错误地使用了它。应该是

children: PropTypes.arrayOf(PropTypes.instanceOf(Option)).isRequired

答案 1 :(得分:0)

由于以下原因,我试图完成的工作实际上不可行

  

sophiebits于2015年8月26日发表评论

     

如果我们确实需要它,则将其称为elementOfType,尽管我不确定我们这样做,因为如果组件期望一个<Button />元素,则您应该(理想情况下)能够传递<PurpleButton />并也有这项工作。

https://github.com/facebook/react/pull/4716

但是有一个类似的解决方法:

// Validates a singular field
var fieldType = React.PropTypes.shape({
    type: React.PropTypes.oneOf([Field])
})

// Accepts either a single field, or an array of fields
// Note: Reject a Form with no children
Form.propTypes = {
    children: React.PropTypes.oneOfType([
        React.PropTypes.arrayOf(fieldType), // array of fields
        fieldType // singular field
    ]).isRequired
}

https://github.com/facebook/react/issues/2979#issuecomment-222379916