React无状态组件中Div可见性切换失效问题求助

你猜的完全没错！问题核心就出在这个普通局部变量isPanelOpen上。在函数组件里，每次组件渲染时这个变量都会被重新初始化为false，更关键的是：修改普通变量的值不会触发React的组件重渲染机制。所以哪怕你点击后把isPanelOpen改成了true，React根本不知道需要重新执行组件函数来更新UI，面板自然不会显示。

在React 16.8及以后的版本中，函数组件可以通过useState Hook来管理状态，它会帮你持久化保存状态值，并且在状态更新时自动触发组件重渲染。修改后的代码如下：

import { useState } from 'react';

const PlayerInfo = (props) => {
  // 使用useState初始化状态，解构出状态值和更新函数
  const [isPanelOpen, setIsPanelOpen] = useState(false);

  return (
    <>
      <div onClick={() => setIsPanelOpen(!isPanelOpen)}>Toggle</div>
      {isPanelOpen && (
        <div className="info-panel">
          {props.children}
        </div>
      )}
    </>
  );
};

关键细节说明： #

• useState(false)会创建一个初始值为false的状态变量isPanelOpen，以及一个专门用来更新它的函数setIsPanelOpen。
• 点击Toggle按钮时，调用setIsPanelOpen(!isPanelOpen)翻转状态值，这个操作会主动通知React状态发生了变化，需要重新渲染组件。
• 组件重新渲染时，useState会返回最新的状态值，此时isPanelOpen为true，对应的面板就会被正常渲染出来。

如果你还在使用React 16.8之前的版本，函数组件无法使用Hook，那你需要把这个组件转换成类组件，通过this.state和this.setState来管理状态：

class PlayerInfo extends React.Component {
  constructor(props) {
    super(props);
    this.state = { isPanelOpen: false };
    this.togglePanel = this.togglePanel.bind(this);
  }

  togglePanel() {
    this.setState(prevState => ({
      isPanelOpen: !prevState.isPanelOpen
    }));
  }

  render() {
    return (
      <>
        <div onClick={this.togglePanel}>Toggle</div>
        {this.state.isPanelOpen && (
          <div className="info-panel">
            {this.props.children}
          </div>
        )}
      </>
    );
  }
}

不过现在几乎没人使用这么旧的React版本了，优先推荐使用useState的方案~

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