如何在單擊按鈕時從 DOM 中卸載功能組件

Question

我想從 DOM 中“卸載一個簡單的功能組件”。 我搜索了很多，發現大多數教程都是基於 Class 組件的，我沒有看到任何簡單的例子。 我的要求是在單擊按鈕時從 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

Answer 1

如果要卸載組件，則可以使用條件渲染，您可以在父組件中聲明 state 並基於 state 可以安裝或卸載組件：

這是您要mount或unmount的父組件

CODESANDBOX DEMO

如果您想切換一次組件，那么您可以執行以下操作，因為只有一種方法可以更改 state 即從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>
  );
}

Answer 2

您可以使用 state 標志來刪除這樣的元素：

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