Question

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

我将引用存储在对象中（domRef，第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 }
      ... />
  );
}

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

1 个答案: