React结构:避免使用多个三元运算符

Question

在一个组件中，我试图"隐藏"；以及"；显示"；元素。有人告诉我三元运算符就是这样做的。然而，由于嵌套的三元运算符，现在它变得更加复杂/混乱。

这是React中正确的方法吗？还是有更好的方法？

示例：

const [compltedWaveOne, setcompltedWaveOne] = useState(false);
const [compltedWaveTwo, setcompltedWaveTwo] = useState(false);
const [compltedWaveThree, setcompltedWaveThree] = useState(false);
const [compltedWaveFour, setcompltedWaveFour] = useState(false);

{compltedWaveOne ?
...Large amount of content 
: //else 
...Large amount of content 
}
... Now I need more content here if completedWaveTwo is true etc. Also need to hide the other content 

Answer 1

1. 三元运算符是很棒的IMO，但一旦开始嵌套，它们就会变得一团糟。这就是为什么你想做这样的事情：

   if(compltedWaveOne) {
   return ([CONTENT]) // you can use your ternary op. here
   } else {
   return ([CONTENT])
   }
   

2. 我建议使用更好的命名约定，而不是compltedWaveOne

3. 您的useState无效，因为您对两个变量的命名相同。

   坚持这种惯例：

   const [state, setState] = useState()
   

Answer 2

您可以简单地使用一个数组和与组件相关的映射，而不是使用多个状态。

const WavesComponents = [Wave1, Wave2, Wave3, Wave4, Wave5];
function _App() {
const [waves, setCompletedWaves] = useState([0, 0, 0, 0, 0]);
function toggleCompletion(idx) {
setCompletedWaves(prev => {
prev.slice();
prev[idx] = !prev[idx];
return prev;
});
}
const WaveComponent = WavesComponents[waves];
return <WaveComponent data={} />;
}