刪除從DOM

Question

我有這樣一段代碼（我已經簡化了張貼在這裏），創建一個組件，使得它

 const getComponentToRender = (user, path) => { 
      switch(path){ 
      case 'ChangePassword': 
       return <ChangePassword user={ user } />; 
      case 'NewPassword': 
       return <NewPassword user={ user } />; 
      case 'PasswordExpire': 
       return <PasswordExpire user={ user } />; 
      default: 
       return null; 
      } 
     } 

     class UserAdmin extends React.Component { 
      static propTypes = { 
      user: PropTypes.object.isRequired 
      }; 
      render() { 
      const component = getComponentToRender(this.props.user, 'ChangePassword');   
      return(
       <div id='user-admin-wrapper'> 
        {component} 
       </div> 
      ) 

      } 
      componentWillUnmount(){ 

      } 
     } 

陣營組成，當我瀏覽從UserAdmin的componentWillUnmount客場被調用。

問：當執行componentWillUnmount時，從DOM中實際刪除組件ChangePassword或任何其他組件（通過其名稱）最簡單的方法是什麼？ OR，除去在任何點的組件，而不必等待componentWillUnmount

使用反應-DOM 15.6.1。 btw

Answer 1

卸載組件將會卸載（移除）它所包含的所有子組件。因此在componentWillUnmount之後，您在其中渲染的組件將被刪除。

如果您需要控制渲染的組件而不卸載，則使用條件渲染邏輯。

例

class SomeComponent extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     shouldIRender: true 
    }; 
    } 
    componentDidMount() { 
    setTimeout(() => { 
     this.setState({shouldIRender: false}); 
    }, 5000); 
    } 
    render() { 
    return(
     <div> 
     <ComponentThatAlwaysHere /> 
     { this.state.shouldIRender === true ? <ComponentThatRemovesAfterStateChange /> : null } 
     { this.state.shouldIRender === true && <AnotherComponentThatRemovesAfterStateChange /> } 
     </div> 
    ) 
    } 
} 

Answer 2

謝謝海報放在這裏，但是這是一件接近我正在尋找

http://codetheory.in/remove-a-mounted-react-component-with-react-unmountcomponentatnode/

而且更正確此

How to unmount, unrender or remove a component, from itself in React?