React.js中点击子div按钮隐藏父div的最简实现方法

原生HTML/CSS/JS里一行代码就能实现的功能，在React里找不到简单方法。需求是：父div包含两个子元素，点击第一个子元素（隐藏按钮）时，隐藏整个父div（包含两个子元素）。

用户尝试的代码：

function SecondPage({ thisData }) {

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

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

        <div className="page" id="InfoPage2">
            <div className="hidePageButton" onClick={hidePage("InfoPage2")}>
                ✖
            </div>
            <div className="pageContent"> 
                Some text and stuff
            </div>
        </div>
    </> );
}
export default SecondPage;

还试过更简便的原生写法：onClick={hidePage(this)} 和 function hidePage(el) {el.parentNode.style.display='none'}，但在React里无效。用户见过的React方案都太复杂，现在只求最简实现，不用遵循React规范，还要支持页面中多实例的场景。

方案1：修复原生DOM操作写法 #

你原来的代码问题在于onClick={hidePage("InfoPage1")}是立即执行函数，不是绑定点击事件。改成箭头函数包裹，点击时才会触发：

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

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

        <div className="page" id="InfoPage2">
            <div className="hidePageButton" onClick={() => hidePage("InfoPage2")}>
                ✖
            </div>
            <div className="pageContent"> 
                Some text and stuff
            </div>
        </div>
    </> );
}
export default SecondPage;

方案2：用事件对象直接找父元素（无ID更简洁） #

利用点击事件的currentTarget拿到按钮元素，再通过parentNode找到父div隐藏，完全不用写ID，多实例直接复用：

function SecondPage({ thisData }) {
    return ( <>
        <div className="page">
            <div className="hidePageButton" onClick={(e) => e.currentTarget.parentNode.style.display = 'none'}>
                ✖
            </div>
            <div className="pageContent"> 
                Some text and stuff
            </div>
        </div>

        <div className="page">
            <div className="hidePageButton" onClick={(e) => e.currentTarget.parentNode.style.display = 'none'}>
                ✖
            </div>
            <div className="pageContent"> 
                Some text and stuff
            </div>
        </div>
    </> );
}
export default SecondPage;

方案3：提取复用函数（代码更整洁） #

如果页面里有大量同类实例，把隐藏逻辑提取成函数，避免重复代码：

function SecondPage({ thisData }) {
    const hideParent = (e) => {
        e.currentTarget.parentNode.style.display = 'none';
    };

    return ( <>
        <div className="page">
            <div className="hidePageButton" onClick={hideParent}>
                ✖
            </div>
            <div className="pageContent"> 
                Some text and stuff
            </div>
        </div>

        <div className="page">
            <div className="hidePageButton" onClick={hideParent}>
                ✖
            </div>
            <div className="pageContent"> 
                Some text and stuff
            </div>
        </div>
    </> );
}
export default SecondPage;

以上方案均直接使用原生DOM操作，完全不遵循React状态管理规范，是你要的最简实现，多实例场景直接复制div即可，无需额外修改。

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