React中遍历组件时如何修改特定组件的可见性？

我第一次用React开发文字游戏，现在遇到组件可见性控制的问题：游戏是8列9行的网格，初始仅希望最后3行的Letter组件可见，剩余组件需要隐藏。用原生JS能实现相同逻辑，但React里设置的隐藏样式始终不生效，后续还需要支持通过用户交互动态隐藏更多字母。

以下是我当前的组件代码：

Letter组件 #

const Letter = ({ letter }) => {
// 接收随机字母，点击时将字母发送到表单输入元素

const [clicked, setClicked] = useState(false);
const [currLetter, setCurrLetter] = useState('');

const { inputVal, setInputVal} = useInputContext();

useEffect(() => {
    const currValues = [];
    
    if (clicked) currValues.push(`${currLetter}`)
    setInputVal(inputVal.concat(currValues))
}, [clicked])

return <div className='letters' disabled={clicked} onClick={() => {
    setClicked((clicked) => !clicked);
    setCurrLetter(`${letter}`)
}}>{letter}</div>
};
export default Letter;

Column组件 #

const Column = () => {
const [randomCol, setRandomCol] = useState([]);

const vowels = ['A', 'E', 'I', 'O', 'U', 'Y'];
const consonants = ['B', 'C', 'D', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'R', 'S', 'T', 'V', 'W']
const goldConsonants = ['X', 'Z', 'Q'];

const randomGen = Math.floor(Math.random() * 100);
const letterGenerator = () => {
// 生成随机字母并传递给Letter组件
    const randomNum = randomGen;

    if (randomNum >= 40) return consonants[Math.floor((Math.random()*consonants.length))];
    if (randomNum >= 5 && randomNum < 40) return vowels[Math.floor((Math.random()*vowels.length))];

    return goldConsonants[Math.floor((Math.random()*goldConsonants.length))];
};

useEffect(() => {
    const col = [];

    // 渲染Letter组件
    for (let j = 0; j < 9; j++) {
        // 列中最后三个元素应可见（即最后三行）
        if (j >= 6) col.push(<Letter letter={letterGenerator()} key={j} />)

        /* 这些组件应不可见。我尝试过内联样式及设置id在单独CSS文件中定位，但均无效 */
        if (j < 6) col.push(<Letter style={{ visibility: 'hidden' }} id='null' key={j}  />)
    };

    setRandomCol(col);
}, []);

return (
    <div className='columns'>
        {randomCol.map(val => val)}
    </div>
);
};
export default Column;

Board组件 #

const Board = () => {
// 将Column组件推入数组并遍历渲染
const board = []
for (let i = 0; i < 8; i++) {
    board.push(<Column key={i} />)
};

return (
    <div className='main-board'>
        {board.map(col => col)}
    </div>
);
};
export default Board;

问题解决思路 #

1. 样式不生效的直接原因 #

Column组件里给j<6的Letter传了style={{ visibility: 'hidden' }}，但Letter组件根本没接收并应用这个style属性！当前Letter只处理了letter props，导致样式参数完全没传到最终的<div>上。

2. 基础修复：让Letter组件支持自定义样式 #

修改Letter组件，接收并传递style及其他props到内部DOM元素：

const Letter = ({ letter, style, ...props }) => {
  // 原有逻辑保持不变
  return <div 
    className='letters' 
    disabled={clicked} 
    style={style}
    {...props}
    onClick={() => {
      setClicked((clicked) => !clicked);
      setCurrLetter(`${letter}`)
    }}
  >{letter}</div>
};

这样你之前设置的隐藏样式就能正常生效了。

3. 更符合React理念的优化：数据驱动渲染 #

你当前把JSX组件存在state里（randomCol是组件数组），这种方式不利于后续状态更新。推荐改为基于数据渲染组件：

• 在Column中存储每行的字母数据和可见状态，而非直接存Letter组件
• 渲染时根据数据动态生成组件

修改后的Column组件示例：

const Column = () => {
  const [columnData, setColumnData] = useState([]);

  const vowels = ['A', 'E', 'I', 'O', 'U', 'Y'];
  const consonants = ['B', 'C', 'D', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'R', 'S', 'T', 'V', 'W']
  const goldConsonants = ['X', 'Z', 'Q'];

  const letterGenerator = () => {
    // 把随机数生成移到函数内部，避免同一列字母类型一致
    const randomNum = Math.floor(Math.random() * 100);
    if (randomNum >= 40) return consonants[Math.floor(Math.random()*consonants.length)];
    if (randomNum >= 5 && randomNum < 40) return vowels[Math.floor(Math.random()*vowels.length)];
    return goldConsonants[Math.floor(Math.random()*goldConsonants.length)];
  };

  useEffect(() => {
    // 生成包含字母和可见状态的数组
    const colData = Array.from({length:9}, (_, index) => ({
      letter: letterGenerator(),
      isVisible: index >=6 // 最后三个元素可见
    }));
    setColumnData(colData);
  }, []);

  return (
    <div className='columns'>
      {columnData.map((item, index) => (
        <Letter 
          key={index}
          letter={item.letter}
          style={{ visibility: item.isVisible ? 'visible' : 'hidden' }}
        />
      ))}
    </div>
  );
};

4. 后续交互控制可见性的思路 #

如果需要通过用户交互隐藏更多字母，只需要：

1. 在Column或上层Board组件中维护columnData状态
2. 编写修改可见状态的函数，例如：

const hideLetter = (rowIndex) => {
  setColumnData(prev => prev.map((item, index) => 
    index === rowIndex ? {...item, isVisible: false} : item
  ));
};

3. 将该函数通过props传递给触发交互的组件（比如按钮），调用时即可修改指定行字母的可见性。

额外优化：修复Letter组件的useEffect循环问题 #

原Letter组件的useEffect依赖了inputVal，但又在内部修改它，会导致无限循环。改用函数式更新解决：

useEffect(() => {
  if (clicked) {
    setInputVal(prevVal => prevVal.concat(currLetter));
  }
}, [clicked, currLetter]);

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