javascript - React Prop 类型检查，如何声明 "any component"？

Question

考虑一个具有以下想法的元素:

function TheElement(props) {
    const {SubElement, value} = props;
    const display = value/2;
    return <><div>some header</div>
        <div><SubElement data={display}/></div>
    </>
}
TheElement.propTypes = {
    value: PropTypes.number.isRequired,
    SubElement: PropTypes.element.isRequired
}

用于以下情况:

function Displayer(props) {
    generateElement = function() {
        //something to dynamically generate the element
        return (props) => return <div>{props.value}</div>
    }
    return <div>
        <TheElement value={10} SubElement={generateElement()}/>
    </div>
}

虽然代码有效，但控制台会显示警告:

Warning: Failed prop type: Invalid prop SubElement of type function supplied to TheElement, expected a single ReactElement.

那么我怎么知道 React 属性是“任何元素”呢？如果我给它一个 PropTypes.func 作为类型，它会在类似类的方法上失败，但即使我让它同时接受 func 和 object 它没有用。因为它不会帮助我阻止提供不会折叠成 react 可渲染的随机函数。

Answer 1

您收到警告是因为 (props) => return <div>{props.value}</div>是一个组件，而不是一个元素。元素将是您因 <SubElement /> 而获得的东西.尝试以下操作，您将不会再收到警告:

function TheElement(props) {
    const { SubElement, value } = props;
    const display = value/2;
    return (
        <>
            <div>some header</div>
            <div>{SubElement}</div>
        </>
    )
}

TheElement.propTypes = {
    value: PropTypes.number.isRequired,
    SubElement: PropTypes.element.isRequired
}


function Displayer(props) {
    generateElement = function() {
        return <div>Some Text</div>
    }
    return (
        <div>
            <TheElement value={10} SubElement={generateElement()}/>
        </div>
    )
}

为了验证组件，我相信你能做的最好的就是使用 Proptypes.func .这是因为 prop-types 无法知道函数是否会产生有效的 react 元素——这将在应用括号语法糖时确定(即评估 <YourComponent />)。你可以看看 prop-types source code看到它只查看您传递给组件的 Prop (即未评估的功能)。

您可以编写一个自定义验证器来评估您传递的 prop，然后确保它返回一个有效的 React 元素，但那样效率太低了不是吗？此外，您必须知道在验证期间将哪些 Prop 传递给组件。只是为了好玩，假设你的组件没有 props，你可以这样做:

customProp: function(props, propName, componentName) {
    if (!React.isValidElement(props[propName]({}))) {
        return new Error()
    }
}

关于react组件和元素的更多信息here .