使用ContextProvider包裹App组件后页面空白且无控制台报错的问题咨询

嘿，我找到问题的根源了！你看你的AppContext.jsx文件里有个不起眼的拼写错误——把props.children写成props.childern了！

React组件中，传递给组件的子元素是通过props.children这个属性来获取的，你拼写错误后，AppContext.Provider内部就没有渲染任何子内容，自然页面就显示空白了。而且因为这属于逻辑错误（不是语法错误），所以控制台不会抛出报错信息，这才让问题有点隐蔽。

来看看修正后的AppContext.jsx代码：

import { createContext } from "react";

export const AppContext = createContext()

export const AppContextProvider = (props) => {

    const value = {

    }
    
    return (
        <AppContext.Provider value={value}>
            {props.children} {/* 这里修正了拼写错误 */}
        </AppContext.Provider>
    )
}

把这个拼写错误改过来之后，重新运行项目，页面应该就能正常显示内容，同时AppContextProvider也能正常包裹你的App组件工作啦。

备注：内容来源于stack exchange，提问作者John Sall