添加(App.tsx):添加CodeContext上下文及相关数据传递逻辑

 添加(CodeContext.tsx):创建CodeContext上下文,并定义数据类型和数据更新方法
 添加(data.ts):将data数组重命名为codes,导出数据接口DataType
This commit is contained in:
ruotongyu
2024-06-04 23:14:08 +08:00
parent 0cc60e1c8c
commit cb260aad57
3 changed files with 16 additions and 5 deletions

View File

@@ -1,13 +1,16 @@
import { useState } from "react"
import Result from "./components/Result"
import Search from "./components/Search"
import { CodeContext } from "./context/CodeContext"
import { codes } from "@renderer/data"
function App(): JSX.Element {
const [data, setData] = useState(codes)
return (
<>
<CodeContext.Provider value={{data, setData}}>
<Search />
<Result />
</>
</CodeContext.Provider>
)
}

View File

@@ -0,0 +1,8 @@
import { Dispatch, SetStateAction, createContext } from "react"
import { DataType } from "@renderer/data"
interface ContextProps {
data: DataType[]
setData: Dispatch<SetStateAction<DataType[]>>
}
export const CodeContext = createContext<ContextProps|undefined>(undefined)

View File

@@ -1,8 +1,8 @@
interface DataType {
export interface DataType {
id: number,
content: string
}
export const data = [
export const codes = [
{id:1, content: "Hello, how are you?"},
{id:2, content: "I am fine, thank you"},
{id:3, content: "How are you?"},