Reactjs 添加带有React、Typescript和useContext的元素

我是Typescript新手，对useContext钩子不太熟悉。基本上，我有两个简单的组件。我想在单击左侧组件下的按钮时，将其添加到右侧的列表中。“我的项目”具有“名称和说明”属性。我只是看着右边的div显示item.name

我想尝试使用useContext，但即使在阅读了文档和大量示例之后，我也不确定从哪里开始。对于我这个小小的例子来说，它们似乎都太复杂了

据我所知，我需要：

• 创建类似AppContext.tsx的内容
• 使用createContext（）创建上下文//不确定必须使用Typescript将其放入此处的参数
• 是否创建提供程序？//我也不确定
• 使用上下文提供程序包装我的两个组件

因此，任何关于程序的提示都将不胜感激。谢谢大家!

function App() {
  return (
    <div className="App">
      <ItemList />
      <ItemContainer />
    </div>
  );
}

函数应用程序（）{
返回(
);
}

我的项目列表组件：

function ItemList() {
  return (
    <div className="itemlist">
      {items.map((item, index) => (
        <div key={index}>
          <div>{item.name}</div>
          <div>{item.description}</div>
          <button>Add to sidebar</button>
        </div>
      ))}
    </div>
  );
}

函数项列表（）{
返回(
{items.map（（项，索引）=>(
{item.name}
{item.description}
添加到侧栏
))}
);
}

最后，我右边的容器：

function ItemContainer() {
  return (
    <div>
      <h1>List of items</h1>
      
      <p>Number of items: {}</p>
      
    </div>
  );
}

function ItemContainer（）{
返回(
项目清单
项目数：{}

);
}

您可以这样做：
首先创建一个名为例如ItemList.context.tsx的上下文文件：

import React, {
  createContext,
  Dispatch,
  FunctionComponent,
  useState
} from "react";
import { Item } from "./data";
type ItemListContextType = {
  itemList: Item[]; // type of your items that I declare in data.ts
  setItemList: Dispatch<React.SetStateAction<Item[]>>; //React setState type
};
export const ItemListContext = createContext<ItemListContextType>(
  {} as ItemListContextType
);

export const ItemListContextProvider: FunctionComponent = ({ children }) => {
  const [itemList, setItemList] = useState<Item[]>([]);

  return (
    <ItemListContext.Provider
      value={{ itemList: itemList, setItemList: setItemList }}
    >
      {children}
    </ItemListContext.Provider>
  );
};

在您的ItemContainer.tsx中，您只需要列表，这样您就可以使用

useContext

从上下文中仅导入

setItemList

：

import { useContext } from "react";
import { ItemListContext } from "./ItemList.context";

export default function ItemContainer() {
  const { itemList } = useContext(ItemListContext);
  return (
    <div style={{ flexGrow: 4 }}>
      <h1 style={{ textAlign: "center" }}>List of items</h1>

      <p>Number of items: {itemList.length}</p>
      {itemList.length > 0 && (
        <ul>
          {itemList.map((item, i) => (
            <li key={i}>{item.name}</li>
          ))}
        </ul>
      )}
    </div>
  );
}

从“react”导入{useContext}；
从“/ItemList.context”导入{ItemListContext}；
导出默认函数ItemContainer（）{
const{itemList}=useContext（ItemListContext）；
返回(
项目清单
项目数：{itemList.length}

{itemList.length>0&&(

{itemList.map（（item，i）=>(
{item.name}
))}

)}
);
}

使用路由器更新
如果您希望浏览器路由器位于应用程序中的最高位置（例如，对于他们提供商或暗模式提供商），则只需将其包装在上下文提供商中即可：

导出默认函数App（）{
返回(
);
}

但我建议您将提供商放在离订阅者组件最近的位置。
例如，您可以创建一个页面组件，该组件将在浏览器路由器中使用，并将提供者放入其中，如下所示：
ItemListPage.tsx

import React, { FunctionComponent } from "react";
import ItemList from "./ItemList";
import ItemContainer from "./ItemContainer";
import { Link } from "react-router-dom";
import { ItemListContextProvider } from "./ItemList.context";
const ItemListPage: FunctionComponent = () => {
  return (
    <>
     <ItemListContextProvider>
      <h1 style={{ alignSelf: "flex-start" }}>ITEM LIST</h1>
      <Link to="/">homePage</Link>
      <div className="itemListPage">
        <ItemList />
        <ItemContainer />
      </div>
      </ItemListContextProvider>

    </>
  );
};
export default ItemListPage;

import React, { FunctionComponent } from "react";
import ItemList from "./ItemList";
import ItemContainer from "./ItemContainer";
import { Link } from "react-router-dom";
import { ItemListContextProvider } from "./ItemList.context";
const ItemListPage: FunctionComponent = () => {
  return (
    <>
     <ItemListContextProvider>
      <h1 style={{ alignSelf: "flex-start" }}>ITEM LIST</h1>
      <Link to="/">homePage</Link>
      <div className="itemListPage">
        <ItemList />
        <ItemContainer />
      </div>
      </ItemListContextProvider>

    </>
  );
};
export default ItemListPage;

import React，{FunctionComponent}来自“React”；
从“/ItemList”导入ItemList；
从“/ItemContainer”导入ItemContainer；
从“react router dom”导入{Link}；
从“/ItemList.context”导入{ItemListContextProvider}”；
const ItemListPage:FunctionComponent=（）=>{
返回(
项目清单
主页
);
};
导出默认项目列表页面；

当然，您删除了App.tsx中的上下文提供程序，它应该是这样的：
App.tsx

import React, { FunctionComponent } from "react";
import ItemList from "./ItemList";
import ItemContainer from "./ItemContainer";
import { Link } from "react-router-dom";
import { ItemListContextProvider } from "./ItemList.context";
const ItemListPage: FunctionComponent = () => {
  return (
    <>
     <ItemListContextProvider>
      <h1 style={{ alignSelf: "flex-start" }}>ITEM LIST</h1>
      <Link to="/">homePage</Link>
      <div className="itemListPage">
        <ItemList />
        <ItemContainer />
      </div>
      </ItemListContextProvider>

    </>
  );
};
export default ItemListPage;

import React, { FunctionComponent } from "react";
import ItemList from "./ItemList";
import ItemContainer from "./ItemContainer";
import { Link } from "react-router-dom";
import { ItemListContextProvider } from "./ItemList.context";
const ItemListPage: FunctionComponent = () => {
  return (
    <>
     <ItemListContextProvider>
      <h1 style={{ alignSelf: "flex-start" }}>ITEM LIST</h1>
      <Link to="/">homePage</Link>
      <div className="itemListPage">
        <ItemList />
        <ItemContainer />
      </div>
      </ItemListContextProvider>

    </>
  );
};
export default ItemListPage;

import React，{FunctionComponent}来自“React”；
从“/ItemList”导入ItemList；
从“/ItemContainer”导入ItemContainer；
从“react router dom”导入{Link}；
从“/ItemList.context”导入{ItemListContextProvider}”；
const ItemListPage:FunctionComponent=（）=>{
返回(
项目清单
主页
);
};
导出默认项目列表页面；

---

谢谢您的回复！我仍在努力理解所有这些是如何工作的，因此我这次尝试用React路由器实现更复杂的功能，以应对挑战。因此，我将把你的答案标记为解决方案。再次感谢。顺便说一下，我也是法国人：）不客气！如果您熟悉angular，它有点像服务，它是在组件之间“共享”道具的解决方案。但我在某个地方读到，如果你使用悬念，你可能会在上下文方面遇到麻烦，但找不到来源。对不起，我也读了很多关于悬念的东西。我现在又被路由器和useContext卡住了。我用列表和你给我的容器创建了一个Main.tsx，在App.tsx中设置了路由，在Main.tsx中添加了上下文提供程序，但是当我添加上下文提供程序时，整个DOM消失，没有加载任何内容。源代码中也没有任何内容。我还想在另一个页面上显示容器中的内容。奇怪的问题。我的路由器一个人工作。useContext代码单独工作。好的，我会更新答案中的沙盒，然后告诉你什么时候会成功，谢谢！我所做的是在列表容器中添加一个按钮，当您单击该按钮时，您会看到一个页面，其中只包含添加的项目列表。我编写的代码是独立工作的（当然没有添加的项），当我尝试使用useContext时，它就会中断。迫不及待地想看看您的实现。出于某种原因，我还没有在网上看到任何类似的东西。

import React, { FunctionComponent } from "react";
import ItemList from "./ItemList";
import ItemContainer from "./ItemContainer";
import { Link } from "react-router-dom";
import { ItemListContextProvider } from "./ItemList.context";
const ItemListPage: FunctionComponent = () => {
  return (
    <>
     <ItemListContextProvider>
      <h1 style={{ alignSelf: "flex-start" }}>ITEM LIST</h1>
      <Link to="/">homePage</Link>
      <div className="itemListPage">
        <ItemList />
        <ItemContainer />
      </div>
      </ItemListContextProvider>

    </>
  );
};
export default ItemListPage;