Reactjs 如何在功能组件中正确存储引用

我正在尝试创建一个测试英语词汇的组件
基本上，有4个选项，1个正确
当用户选择选项时，正确的选项显示为绿色，错误的选项显示为红色。
然后用户可以按“下一步”按钮转到下一批单词。

我将参照存储在对象中（domRefs，第68行）。
在第80行填充它。
并删除第115行的所有参考。
但它不会被删除，并导致错误（第109行）

所以问题是-如何存储这些引用以及编写此组件的更好方法是什么？

---

请帮助，谢谢。

您不应该在全局变量中保留组件的引用，因为这样会使组件成为单例。要应用某些样式，只需使用条件渲染即可。此外，最好将您的测试应用程序拆分为几个单独的组件，并承担较小的责任：

const getClassName（索引，选中，右答案）{
如果（选定===null）{
返回；
}
如果（索引===rightAnswer）{
返回类。右答案；
}
如果（索引==选定）{
返回类。错误答案；
}
}
常量步骤=（{问题，答案，右答案，选中，onSelect，onNext}）=>(
{问题}
{answers.map(
（答案，索引）=>(
onSelect（索引）}
className={getClassName（索引，选中，右答案）}
) }
{已选择（&Next}
);
常数测试=（）=>{
const[index，setIndex]=useState（）；
常量词=…，答案=…，onSelect=…，onNext=。。。，
返回(
);
}