如何使用React的prop-types包检查特定类型的元素？

Question

我想使用prop-types专门检查img或svg元素（在顶层）。我将如何使用该库进行检查或创建自定义道具类型？

Answer 1

您可以使用JSX对象的type属性来检查正在传递的HTML元素。

子组件

class SomeComponent extends React.Component {
    render() {
        const { passedElement } = this.props;

        return (
            {passedElement}
        );
    }
}

SomeComponent.propTypes = {
    passedElement: PropTypes.shape({
        type: PropTypes.oneOf(['img', 'svg']),
    }),
};

父组件

class App extends React.Component {
    render() {
        // Warning: Failed prop type: Invalid prop `passedElement.type` of value `div` supplied to `SomeComponent`, expected one of ["img","svg"].
        return <SomeComponent passedElement={<div></div>} />

        // No error, renders as expected
        return <SomeComponent passedElement={<img />} />
    }
}