用 react-context 包装 App 组件后的空白屏幕答案

【问题标题】：blank screen after wrapping App component with react-context用 react-context 包装 App 组件后的空白屏幕
【发布时间】：2022-07-02 08:21:01
【问题描述】：

我正在编写上下文 API，一切正常，但是当我用上下文屏幕包装 App 组件时，屏幕变为空白

上下文代码

import { useState } from "react";
import { createContext, useContext } from "react";

const chatContext = createContext();

const ChatContext = ({ childern }) => {
  const [user, setuser] = useState();
  return (
    <chatContext.Provider value={{ user, setuser }}>
      {childern}
    </chatContext.Provider>
  );
};

export const ChatState = () => {
  return useContext(chatContext);
};

export default ChatContext;

包装contex之前的index.js代码

ReactDOM.render(
  <React.StrictMode>
    <Router>
      <App />
    </Router>
  </React.StrictMode>,
  document.getElementById("root")
);

**包装上下文 api 后的代码 **

import ChatContext from "./Context/ChatContext";

ReactDOM.render(
  <ChatContext>
    <Router>
      <App />
    </Router>
  </ChatContext>,
  document.getElementById("root")
);

但是屏幕变黑了谁能帮帮我。

我试图解决这个问题，但无法做到。请任何可以帮助我的人都将被应用

【问题讨论】：

您在浏览器控制台中看到什么错误？
浏览器控制台没有错误

标签： javascript reactjs react-hooks

【解决方案1】：

我认为你只是拼错了你写的childern的children，如果你改正了你写它的方式，问题就会解决

const ChatContext = ({ *childern* children }) => {
  const [user, setuser] = useState();
  return (
    <chatContext.Provider value={{ user, setuser }}>
      {*childern* children}
    </chatContext.Provider>
  );
};

export const ChatState = () => {
  return useContext(chatContext);
};

export default ChatContext;

【讨论】：