在reactJs中的函数外使用useState变量

Question

我有一个函数，其中我在一个名为active的变量上使用useState钩子。这个变量取一个字符串值，单击时取所单击类别的值。我的目标是在函数之外使用类别的这个值，以便对特定类别执行操作。

有没有一种方法可以导出这个activeuseState变量的值，在这个函数之外的项目中的任何地方。

我的代码结构如下：

export const funct = () => {
// useState variable that will take the value of category that it gets clicked on/
const [active, setActive] = useState('');

return (
<div className='abc'>
{
content.map((info) =>
// Card is the category card which has a string value associated with, i.e. (info.name)
<Card key={info.name} cardInfo={info} state={active} onClick={() => setActiveState(info.name)} />)
}
</div>
)
}

任何帮助都将不胜感激。谢谢

Answer 1

取决于您所说的"外部"；函数一般有4种解法。

1. 将状态放在应用程序范围的更高位置，并将getter/setter传递到组件中
2. 使用React Context，包装所有需要共享状态的组件
3. 使用第三方库，如redux或zustand
4. 滚你自己的"；反应之外的状态"；解决方案也就是说，如果你不太关心并发性，只需将一个变量放在全局范围内，或者使用本文中的react hooks全局状态或提示等类似内容