删除从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?