typescript 如何正确使用React useContext？

vwhgwdsa 于 6个月前发布在 TypeScript

关注(0)|答案(1)|浏览(54)

此问题在此处已有答案：

How to use "useContext" in typescript?（1个答案）
11天前关闭。
尝试创建一个可以存储用户名的上下文，并允许孩子更改/设置所述用户名。IDK如果最近更新了react，但所有的在线教程都显示useContext()没有参数，但现在它需要一个，这使得设置value=[userName, setUserName]更糟糕。我一直得到错误“类型”（调度|undefined）[]'不可分配给类型' string '“

import React, { useState, createContext } from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import logo from './logo.svg';
import './App.css';
import Home from './components/homepage/Home';
import Register from './components/register/Register';
import Post from './components/post/Post'; 
import Feed from './components/feed/Feed';

export const Context = createContext('');

function App() {

  const [userName, setUserName] = useState();

  return (
    <BrowserRouter>
    <Routes>
        <Route path="/" element={<Context.Provider value = {[userName, setUserName]}><Home /></Context.Provider>} />
        <Route path="/register" element={<Register />} />
        <Route path="/post" element={<Post />} />
        <Route path="/feed" element={<Feed />} />
    </Routes>
  </BrowserRouter>
  );
}

export default App;

字符串
我也试过这种方法，但没有用。

// Create a new context and export
export const NameContext = createContext();
 
// Create a Context Provider
const NameContextProvider = ({ children }) => {
    const [name, setName] = useState(undefined);
 
    return (
        <NameContext.Provider value={{ name, setName }}>
            {children}
        </NameContext.Provider>
    );
};

型

typescript

来源：https://stackoverflow.com/questions/77449367/proper-use-of-react-usecontext

1条答案

按热度按时间

7kqas0il1#

以下是如何在项目中使用useContext的简单演示：
首先，创建上下文文件。

NameContext.jsx

export const NameContext = createContext();
 
const NameContextProvider = ({ children }) => {
    const [name, setName] = useState(undefined);
 
    return (
        <NameContext.Provider value={{ name, setName }}>
            {children}
        </NameContext.Provider>
    );
};

字符串
像这样 Package 需要来自提供程序的值的组件：

App.jsx

<NameContextProvider>
   //add whatever React component you want here that needs the values from 
     the above provider.
   </Sample>
</NameContextProvider>

型
以下是您如何在内部使用它：

示例.jsx

const { name, setName } = useContext(NameContext)

型
提示：你也可以在你的Context文件中创建一个这样的函数，这样更容易访问，你不需要在每次需要Context Provider的时候都调用useContext：

export function useNameContext():  {
  const context = useContext(NameContext);
  if (!context)
    throw new Error('some error message');
  return context;
}

型
现在它在你的代码中应该是这样的：

const { name, setName } = useNameContext();

型
希望这对你有帮助！

赞(0）回复(0）举报 6个月前

我来回答

typescript 如何正确使用React useContext？

1条答案

相关问题

热门标签

最新问答