如果不使用Context.Consumer的方式呢
时间: 2024-02-19 16:02:51 浏览: 22
如果你不想在子组件中使用 `Context.Consumer`,还有一种方式可以在子组件中设置 Context 的值。
这种方式是通过使用 `useContext` 钩子来获取 Context 的值,并使用 `useState` 钩子来改变值。
以下是一个示例代码:
```typescript
import React, { createContext, useContext, useState } from 'react';
type MyContextType = {
count: number;
setCount: React.Dispatch<React.SetStateAction<number>>;
};
const MyContext = createContext<MyContextType>({
count: 0,
setCount: () => {},
});
const ChildComponent = () => {
const { count, setCount } = useContext(MyContext);
const [inputValue, setInputValue] = useState('');
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setInputValue(e.target.value);
};
const handleButtonClick = () => {
setCount(Number(inputValue));
};
return (
<div>
<h2>Child Component</h2>
<p>Count: {count}</p>
<input type="number" value={inputValue} onChange={handleInputChange} />
<button onClick={handleButtonClick}>Set Count</button>
</div>
);
};
const ParentComponent = () => {
const [count, setCount] = useState(0);
return (
<MyContext.Provider value={{ count, setCount }}>
<div>
<h1>Parent Component</h1>
<ChildComponent />
</div>
</MyContext.Provider>
);
};
export default ParentComponent;
```
在这个例子中,我们使用 `useContext` 钩子来获取 `MyContext` 的值,并使用 `useState` 钩子来保存子组件中的输入值。在 `handleButtonClick` 函数中,我们将输入值转换成数字,并将它设置为 `count` 的值。这样,我们就可以在子组件中设置 Context 的值了。
需要注意的是,在这种方式中,我们使用了函数组件来实现 `ChildComponent` 和 `ParentComponent`,因为 `useContext` 钩子只能在函数组件中使用。另外,我们还使用了 TypeScript 来定义 Context 的类型和 `setCount` 函数的类型。