如何使用 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 />} />
    }
}