如何将此 javascript 代码翻译成 JSX React

Question

所以我有这个我想在 React react 中使用的 javascript 代码，它目前正在工作，所以这就是我得到的，首先

这是我的 JAVASCRIPT 代码我想变成 GATSBY react JSX 的那个

function onLoad() {
        var showDiv;
        if(localStorage.getItem ("showDiv") == null) {
            showDiv = true;
        }
        else {
            showDiv = localStorage.getItem ("showDiv")
        }

        if (showDiv) {
             document.getElementById ('myDiv') .style.display = 'block';
        }
        else {
            document.getElementById ('myDiv') .remove();
        }
    }

    function onClose() {
        document.getElementById ('myDiv') .remove();
        localStorage.setItem("showDiv", false);
    }

这就是我到目前为止所做的，它可以工作，但我不知道如何从 javascript 代码中编写上面的 onClose 函数

所以这是我的组件

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



export default function Com() {
  useEffect(() => {
    var showDiv;
  if (localStorage.getItem ("showDiv") == null) {
      showDiv = true;
  }
      else {
          showDiv = localStorage.getItem ("showDiv")
      }
      if (showDiv) {
        document.querySelector ('.contenedor').style.display = 'block';
     }
     else {
      document.querySelector ('.contenedor').remove();
     }
     
     () => {
      document.querySelector ('.contenedor').remove(); /* THIS IS THE ANONYMOUS FUNCTION */
      localStorage.setItem("showDiv", false);
     }
  }, []);
  return (
  <div className="contenedor" style={{display: "none"}}>
  <img className="portada" src="https://res.cloudinary.com/lenguaestudiocreativo/image/upload/v1626228418/hportada_jgljqd.svg" alt=""/>
</div>
 );
}

这是我的主要索引：

import React from 'react';
import './index.css';
import Com from './componentes/Comdos';


export default function index() {
  return (
    <Com />
  )
};

我尝试使用这个匿名函数，但是它不起作用，当然，如果我删除这个匿名函数它可以正常工作，但我还需要代码的最后一部分，onClose 函数，如果匿名函数不起作用，我该如何编码？

这就是我在使用匿名函数时遇到的错误

错误 C:\Users\USUARIO\Downloads\VSCODE\JSXejercicios\landingpage\src\pages\componentes\Comdos.js 22:10 错误预期分配或函数调用，而是看到 一个表达式 no-unused-expressions

✖ 1 个问题（1 个错误，0 个警告）

Answer 1

你可以使用 react useState 和 useEffect 钩子，试试这个：

import React, { useState, useEffect } from "react";

export default function App() {
  const [show, setShow] = useState(true);

  useEffect(() => {
    if (localStorage.getItem("showDiv") == null)
      localStorage.setItem("showDiv", show);
  }, []);

  function togglePic() {
    setShow(!show ? true : false);
    localStorage.setItem("showDiv", !show);
  }

  return (
    <>
      <button onClick={togglePic}>Click to toggle the picture</button>
      <div className="contenedor" style={{ display: show ? "block" : "none" }}>
        <img
          className="portada"
          src="https://static.wikia.nocookie.net/spongebob/images/3/3e/SpongeBob_Star_show.jpeg"
          alt=""
        />
      </div>
    </>
  );
}

参考：

这里有一些您可以进一步探索的参考资料

ReactJs Documentation - Conditional Rendering
ReactJs Documentation - Handling Events
ReactJs Documentation - Hooks State
ReactJs Documentation - Hooks Effect

代码示例：

使用 CodeSanbox 尝试实时代码
Code Sanbox - Demo