如何在单击按钮时从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>
);
}

Answer 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