在React.js中单击时让div按钮隐藏其父div的最简单方法是什么

Question

我有一个简单的 HTML/CSS/JS 任务（一行），但我在 React 中找不到简单且有效的方法。

我有一个父级 div，它有两个子级。 第二个孩子是有意义的内容。 第一个子元素是一个“隐藏”按钮，单击该按钮会隐藏父 div（当然包括两个子 div）。

function SecondPage({ thisData }) {

    function hidePage(thisID) {
        let thisElement = document.getElementById(thisID)
        thisElement.style.display='none';
    }

    return ( <>
        <div className="page" id="InfoPage">
            <div className="hidePageButton" onClick={hidePage("InfoPage")}>
                ✖
            </div>
            <div className="pageContent"> 
                Some text and stuff
            </div>
        </div>
    );
}

事实上，还有一种更简单/更简单的方法，使用

onClick={hidePage(this)}

和

function hidePage(el) {el.parentNode.style.display='none'

}

但是这些方法在React中不起作用。 我已经看到了一些针对 React 的建议解决方案，据说它们可以满足我的需求，但它们很复杂。 他们建议定义具有嵌入式函数和各种看似额外的包袱的类来完成这个简单的任务。

我还读过一些提示，通过 ID 获取元素并获取父元素并不符合 React 的理念。 但我不在乎这个。 我不需要根据 React 福音的最佳方法，或者最模块化的，或者最安全的，或者类似的东西。 但我也不想安装一些提供此功能的额外软件包，因为它可能不强大或将来无法正常工作，但如果它是一个真正受到强烈支持的软件包，我会考虑它。

我知道我可能必须使用

useState

和

useEffect

才能使其正常工作。 创建一个保存可见状态的切换变量，并在条件语句中使用该变量来确定是显示页面还是显示 null。 然后 onClick 我更改切换的值，这会更改页面的呈现。 我发现了一些与此类似的示例，但不是在 React 中工作的最小示例。

在 React (jsx) 中单击时获取 div 按钮以隐藏其父 div（或进行其他样式更改）的最简单可能的方法是什么。

Answer 1

• 您需要父 div 的

  ref

• 一个

  onClick

  处理程序，用于将父 div

  display

  设置为

  none

import { useCallback, useRef } from 'react';
import './App.css';

function App() {
  const pageRef = useRef(null);
  const hidePage = useCallback(() => {
    pageRef.current.style.display = 'none';
  }, [pageRef.current]);

  return (
    <div className="page" id="InfoPage" ref={pageRef}>
      <div className="hidePageButton" onClick={hidePage}>
        ✖
      </div>
      <div className="pageContent">Some text and stuff</div>
    </div>
  );
}

export default App;

工作示例：https://stackblitz.com/edit/vitejs-vite-amkkzf?file=src%2FApp.jsx