React条件渲染：无需为每个元素设置布尔状态变量的方法

当然有几种更简洁的实现方式，不用给每个元素单独在state里定义布尔变量，下面是具体方案：

1. 用布尔数组存储显隐状态 #

因为你的元素是通过数组map生成的，索引和元素一一对应，直接用布尔数组来存储每个位置的显隐状态，代码更简洁直观：

const [visibleArr, setVisibleArr] = React.useState([true, true, true]);
const arr = [1, 2, 3];

const handleOnChange = (index) => {
  // 复制原数组并修改对应索引的状态
  const newVisibleArr = [...visibleArr];
  newVisibleArr[index] = !newVisibleArr[index];
  setVisibleArr(newVisibleArr);
};

return (
  <div className="App">
    {arr.map((ele, idx) => (
      <div key={idx}>
        {visibleArr[idx] && <h1>{`element${idx}`}</h1>}
        <button onClick={() => handleOnChange(idx)}>{`element ${idx} button`}</button>
      </div>
    ))}
  </div>
);

2. 用Set存储需要隐藏的索引 #

这种方式只记录需要隐藏的元素索引，初始为空集合，点击时切换索引的存在状态（存在则移除，不存在则添加）。渲染时判断索引是否不在隐藏集合中即可，适合元素数量较多的场景，能节省状态存储空间：

const [hiddenIndexes, setHiddenIndexes] = React.useState(new Set());
const arr = [1, 2, 3];

const handleOnChange = (index) => {
  const newHiddenSet = new Set(hiddenIndexes);
  if (newHiddenSet.has(index)) {
    newHiddenSet.delete(index);
  } else {
    newHiddenSet.add(index);
  }
  setHiddenIndexes(newHiddenSet);
};

return (
  <div className="App">
    {arr.map((ele, idx) => (
      <div key={idx}>
        {!hiddenIndexes.has(idx) && <h1>{`element${idx}`}</h1>}
        <button onClick={() => handleOnChange(idx)}>{`element ${idx} button`}</button>
      </div>
    ))}
  </div>
);

3. 将显隐状态与数据源绑定 #

如果你的数据源可以调整结构，直接把显隐状态嵌入到每个数据项中，这样状态管理更集中，不用额外维护单独的状态变量：

const [dataArr, setDataArr] = React.useState([
  { value: 1, visible: true },
  { value: 2, visible: true },
  { value: 3, visible: true }
]);

const handleOnChange = (index) => {
  const newDataArr = [...dataArr];
  newDataArr[index].visible = !newDataArr[index].visible;
  setDataArr(newDataArr);
};

return (
  <div className="App">
    {dataArr.map((item, idx) => (
      <div key={idx}>
        {item.visible && <h1>{`element${idx}`}</h1>}
        <button onClick={() => handleOnChange(idx)}>{`element ${idx} button`}</button>
      </div>
    ))}
  </div>
);

内容的提问来源于stack exchange，提问作者skay