原生JavaScript显隐控制逻辑如何改写为Gatsby React JSX并实现onClose

报错原因 #

你在useEffect回调函数内直接定义了一个未赋值、未调用的匿名函数，ESLint检测到该表达式没有实际作用，因此抛出no-unused-expressions错误。你原本可能想将它作为useEffect的清理函数，但就算是清理函数也需要用return返回，且你的onClose是用户主动触发的交互逻辑，完全不应该写在useEffect内部。

正确实现方案 #

遵循React状态驱动渲染的设计原则，不要直接操作DOM，用state控制元素显隐，逻辑更清晰也更易维护，完整代码如下：

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

export default function Com() {
  // 用state控制元素是否渲染
  const [showDiv, setShowDiv] = useState(false);

  useEffect(() => {
    // localStorage存储的值都是字符串，需要转换为布尔值处理
    const storageVal = localStorage.getItem("showDiv");
    // 首次访问无存储值时默认展示
    setShowDiv(storageVal === null ? true : JSON.parse(storageVal));
  }, []);

  // 单独封装关闭逻辑，绑定到交互元素即可触发
  const onClose = () => {
    setShowDiv(false);
    localStorage.setItem("showDiv", false);
  };

  // 状态为false时直接不渲染，等效于原生代码的remove效果
  if (!showDiv) return null;

  return (
  <div className="contenedor">
    {/* 关闭按钮，可根据需求替换为你自己的触发元素 */}
    <button onClick={onClose} style={{position: 'absolute', top: '8px', right: '8px'}}>关闭</button>
    <img className="portada" src="https://res.cloudinary.com/lenguaestudiocreativo/image/upload/v1626228418/hportada_jgljqd.svg" alt="封面"/>
  </div>
 );
}

优化说明 #

• 移除了所有手动DOM操作，完全通过React状态控制渲染，避免原生DOM操作和React渲染逻辑冲突的隐患
• 处理了localStorage存值为字符串的特性，避免出现"false"字符串转布尔值为true的逻辑错误
• 关闭逻辑独立封装，你可以根据需求将onClose绑定到任意元素的对应事件上，比如点击蒙层关闭、点击图片关闭等

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