在React中执行道具验证时失败道具类型。js

Question

我正在做一个React项目，其中有一个名为CurrencyContext的上下文。js。整个项目运行得很好，但是，我得到了一个控制台错误，显示失败的prop type。

完全错误消息

警告：失败的道具类型：货币内容提供者：道具类型子无效；它必须是一个函数，通常来自prop-type包，但收到un定义。这种情况经常发生是因为诸如PropTypes.function而不是PropTypes.func这样的错别字。

有关更多说明，请参见CurrencyContext的代码。js。如果有什么不清楚的地方，请告诉我。

import React, {Component, createContext} from "react"

export const CurrencyContext = createContext()

class CurrencyContextProvider extends Component {

    constructor(props) {
        super(props);
        this.state = {
            selectedCurrency: 'USD'
        }
    }

    setCurrency(c){
        this.setState({selectedCurrency: c})
    }

    render() {
        return (
            <CurrencyContext.Provider value={{...this.state, setCurrency: this.setCurrency.bind(this)}}>
                {this.props.children}
            </CurrencyContext.Provider>
        )
    }
}

CurrencyContextProvider.propTypes = {
    children: React.ReactNode
}

export default CurrencyContextProvider;

Answer 1

反应。ReactNode在javascript中是未定义的。如果您使用typecript，它将是一种类型，但即使是这种类型也只存在于编译时，不能用于proxType。

相反，做儿童道具类型的方法是：

import PropTypes from 'prop-types';
// ...
CurrencyContextProvider.propTypes = {
    children: PropTypes.node
}