React prop類型檢查，如何聲明“任何組件”？

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>
}

當代碼工作時，控制台會顯示警告：

警告：失敗的道具類型：提供給TheElement的類型function道具SubElement無效，應為單個 ReactElement。

那么我怎么能告訴 react 一個屬性是“任何元素”呢？ 如果我給它一個PropTypes.func作為類型，它會在類類方法上失敗，但即使我讓它接受func和object它也沒有用。 因為它不會幫助我防止提供不會折疊為可渲染的反應的隨機函數。

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 源代碼，看看它只查看您傳遞給組件的 props（即未評估的函數）。

您可以編寫一個自定義驗證器來評估您傳遞的道具，然后確保它返回一個有效的反應元素，但這太低效了不是嗎？ 此外，您必須知道在驗證期間傳遞給組件的道具是什么。 只是為了好玩，假設你的組件沒有道具，你可以做這樣的事情：

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

還有更多有關反應的組分和元素在這里。