React实现点击按钮隐藏DIV功能时代码不生效该如何解决

代码存在的问题 #

• onClick 回调写法错误：你写的 () => setClick(true), hideDiv 属于逗号表达式，点击时只会返回 hideDiv 函数但不会执行，同时提前手动调用 setClick(true) 会直接打乱状态判断逻辑。
• DOM样式赋值语法错误：document.getElementById('main').style.display = {display} 这里的大括号是JSX的插值语法，原生JS给字符串类型的样式属性赋值不需要加大括号，{display} 实际是一个包含display属性的对象，赋值给display属性自然不生效，直接写 = display 即可。
• 不符合React开发规范：React主张数据驱动视图，不推荐直接操作原生DOM，你的点击状态已经存在 click 变量里了，完全可以通过状态直接控制目标div的显示隐藏，不需要调用getElementById。
• 状态更新逻辑冗余：hideDiv 里的状态更新和display值计算可以大幅简化，不需要额外定义临时变量。

快速修复方案（最小改动让现有代码生效） #

import React, {useState} from 'react';
import './Button.css';

export function Button() {
    const [click, setClick] = useState(false);

    const hideDiv = () => {
        const newClickState = !click;
        const display = newClickState ? 'none' : 'block';
        document.getElementById('main').style.display = display;
        setClick(newClickState);
    };

    return(
        <button className='btn' onClick={hideDiv}>Some button!</button>
    );
};

推荐的React标准写法（无需操作DOM） #

你可以把显示状态提升到父组件，直接通过状态控制目标div的显示隐藏，避免原生DOM操作：

// 父组件示例
import React, {useState} from 'react';
import { Button } from './Button';

function App() {
  const [showMain, setShowMain] = useState(true);
  return (
    <div>
      <Button toggleShow={() => setShowMain(!showMain)} />
      <div id="main" style={{display: showMain ? 'block' : 'none'}}>
        要隐藏的目标内容
      </div>
    </div>
  )
}

// 调整后的Button组件
export function Button({ toggleShow }) {
    return(
        <button className='btn' onClick={toggleShow}>Some button!</button>
    );
};

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