Question

我正在尝试将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,
};

Answer 1

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

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

Answer 2

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

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

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

2 个答案: