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

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

How can I use React's prop-types package to check for a specific type of element?

reactjs

react-proptypes