如何在单击按钮时从 DOM 中卸载功能组件答案

【问题标题】：How can i unmount a functional component from DOM on click of a Button如何在单击按钮时从 DOM 中卸载功能组件
【发布时间】：2022-08-12 15:41:09
【问题描述】：

我想从 DOM 中“卸载一个简单的功能组件”。我搜索了很多，发现大多数教程都是基于类组件的，我没有看到任何简单的例子。我的要求是在单击按钮时从 DOM 中卸载功能组件。以下是带有按钮的组件，单击它时我喜欢卸载它。希望有人可以帮助我做到这一点。提前致谢！

import React from \'react\'

function App() {
 return (
    <div className=\'app-component\'>
      <h2 className=\"h2\">App Component</h2>
      <button>Unmount This Component</button>
    </div>
  )
}

export default App

您可以根据父组件中的状态有条件地渲染您的组件。单击按钮使状态falsy 值。

标签： reactjs functional-programming components unmount

【解决方案1】：

如果要卸载组件，则可以使用条件渲染，您可以在父组件中声明状态，并根据状态安装或卸载组件：

这是您想要 mount 或 unmount 的父组件

CODESANDBOX DEMO

如果您想切换一次组件，那么您可以执行以下操作，因为只有一种方法可以更改状态，即从 Test 组件。如果你unmount这个组件没有办法再次mount它。因此，您还可以在 App 组件中声明按钮，您可以在单击按钮时从 mount 或 unmount 中声明按钮。 CODESANDBOX

Parent component
export default function App() {
  const [isShowing, setIsShowing] = useState(true);  // STATE
  return (
    <div className="App">
      {isShowing && <Test setIsShowing={setIsShowing} />}
    </div>
  );
}
Child component
function Test({ setIsShowing }) {
  function unmountComponent() {
    setIsShowing(false);
  }
  return (
    <div className="app-component">
      <h2 className="h2">App Component</h2>
      <button onClick={unmountComponent}>Unmount This Component</button>
    </div>
  );
}

【讨论】：

嗨 Decpk，谢谢你给我一个详细的解决方案。

【解决方案2】：

您可以使用状态标志来删除这样的元素：

import React from 'react'

function App() {
const [flag,setFlage]=useState(true);
 return (
    <div className='app-component'>
      {flag?<h2 className="h2">App Component</h2>:null}
      <button onClick={()=>setFlag(!flage)} >Unmount This Component</button>
    </div>
  )
}

export default App

【讨论】：

嗨 Arash Ghazi，感谢您给我提供满足我要求的线索。