如何通过单击按钮从 DOM 中卸载功能组件

Question

我想从 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

Answer 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>
  );
}