如何在功能组件中正确存储 refs

Question

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

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

https://stackblitz.com/edit/react-yocysc

所以问题是 - 如何存储这些引用以及编写这个组件的更好方法是什么？
请帮忙，谢谢。

Answer 1

您不应该将组件的引用保存在全局变量中，因为它会使您的组件成为单例。要应用某些样式，只需使用条件渲染。此外，最好将您的测试应用拆分成几个职责较小的独立组件：

const getClassName(index, selected, rightAnswer) {
  if (selected === null) {
    return;
  }

  if (index === rightAnswer) {
    return classes.rightAnswer;
  }

  if (index === selected) {
    return classes.wrongAnswer;
  }
}
const Step = ({ question, answers, rightAnswer, selected, onSelect, onNext }) => (
  <div ...>
    <div>{ question }</div>
    { answers.map(
      (answer, index) => (
        <Paper
          key={ index }
          onClick={ () => onSelect(index) }
          className={ getClassName(index, selected, rightAnswer) } 
    ) }
    { selected && <button onClick={ onNext() }>Next</button> }
  </div>
);

const Test = () => {
  const [ index, setIndex ] = useState();
  const word = ..., answers = ..., onSelect = ..., onNext = ...,

  return (
    <Question
      question={ word }
      answers={ answers }
      ... />
  );
}