javascript - 特定组件的 PropTypes？

Question

我有这个简单的 React 组件:

import {PropTypes} from 'react';
import Column from './Column';

export default function ColumnContainer({children}) {
    return (
        <div className="cr-column-container">{children}</div>
    );
}

let ColumnType = PropTypes.instanceOf(Column);

ColumnContainer.propTypes = {
    children: PropTypes.oneOfType([
        ColumnType,
        PropTypes.arrayOf(ColumnType),
    ]).isRequired,
};

我是这样使用的:

render() {
    return (
        <ColumnContainer>
            <Column>
                *snip*
            </Column>
        </ColumnContainer>
    );
}

但是它没有通过 prop 类型验证:

Warning: Failed prop type: Invalid prop `children` supplied to `ColumnContainer`.
    in ColumnContainer (created by ExampleContainer)
    in ExampleContainer

这是为什么呢？我只在 ColumnContainer 中使用了 Column。 PropTypes.instanceOf(Column) 是否没有像我预期的那样工作？我如何应该指定 ColumnContainer 将只接受 Column 类型的子项？

Answer 1

做了一些挖掘，想出了这个基于 josephmartin09's solution 的辅助函数:

export function childrenOf(...types) {
    let fieldType = PropTypes.shape({
        type: PropTypes.oneOf(types),
    });

    return PropTypes.oneOfType([
        fieldType,
        PropTypes.arrayOf(fieldType),
    ]);
}

用法:

ColumnContainer.propTypes = {
    children: childrenOf(Column).isRequired,
};

这并不理想，因为它不支持像 'div' 这样的原生 DOM 元素，并且错误消息毫无值(value)，但它现在可以了。