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被调用。

问：在执行ChangePassword时，从DOM中实际删除组件componentWillUnmount或任何其他组件（通过其名称）的最简单方法是什么。 OR ，随时删除组件，无需等待componentWillUnmount

使用react-dom 15.6.1。顺便说一句

Answer 1

感谢这里的海报，但这与我正在寻找的东西相近

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

更正确的是

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

Answer 2

卸载组件将卸载（删除）其包含的所有子组件。因此，在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> ) } }

从DOM中删除React组件

2 个答案: