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