单击按钮，我如何从DOM中卸载功能组件

发布于 2025-02-12 17:10:50 字数 407 浏览 0 评论 0原文

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

原文

I would like to "Unmount a simple Functional Component" from the DOM. I searched a lot and saw most of the tutorials are based on Class Components and I did'nt see any simple example on it. My requirement is Unmounting a Functional component from the DOM on click on a button. Following is the component with the button which i likes to unmount when click on it. Hopes someone can help me to do it. Thanks in Advance !

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

自由如风 2025-02-19 17:10:50

如果要卸载组件，则可以使用有条件渲染，可以在其中声明父组件中的状态，并且基于状态可以安装或卸载组件，为：

这是您想要oct 或Unmount

code> codesandbox demo

如果要切换一个组件，则可以执行以下操作，因为只有一种方法可以从test test组件更改状态。如果您卸载此组件无法再次进行Mount它。因此，您还可以在app组件中声明按钮，可以在其中mount或单击按钮时删除。 codesandbox P>

> parent component

export default function App() {
  const [isShowing, setIsShowing] = useState(true);  // STATE
  return (
    <div className="App">
      {isShowing && <Test setIsShowing={setIsShowing} />}
    </div>
  );
}

儿童组件

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

If you want to unmount a component then you can use conditional rendering where you can declare state in parent component and based on the state you can mount or unmount component as:

This is the parent component from where you want to mount or unmount

CODESANDBOX DEMO

If you want to toggle component once then you can do the following because there is only one way to change state i.e from Test component. If you unmount this component there is no way to mount it again. So you can also declare button in App component from where you can mount or unmount on click of a button. 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>
  );
}

回复收藏 0 原文

一束光，穿透我孤独的魂 2025-02-19 17:10:50

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

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

You can use state flag for removing element like this:

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

回复收藏 0 原文

~没有更多了~