react 怎么卸载一个组件啊。

Question

react 怎么卸载一个组件啊。
比如 我有两个组件
import LogIn from './LogIn.js'
import LogOut from './LogOut.js'
在页面都render的时候 都显示出来了

在加载以后判断用户是否登录，如果登录就显示LogIn 没有登录 就显示LogOut

在componentDidMount里边判断完了以后怎么卸载其中的某一个组件啊

Answer 1

这个问题感觉对于React的理解不够深入。react 的render方法每次都会绘制出当前数据对应的UI来，so，只要合理的控制state，就能实现对应的显示LogOut组件或者显示LogIn组件。根本不需要卸载这个概念。

Answer 2

听你的需求，似乎用if else更合适，例如：

if (loggedIn) {
  return <LogOut />;
}

return <LogIn />;

如果非想要手动卸载组件的话，可以看ReactDOM.unmountComponentAtNode

Answer 3

没有必要都显示出来，根据状态显示一个就可以。

const isLogin = checkLoginState(userid, username); // maight need a ajax
class LoginOrLogout extends Component{
  state = {
    isLogin: false, // default state
  }
  render() {
    return (
      <div>{this.state.isLogin ? <Login /> : <Logout />}</div>
    );
  }
}

Answer 4

你可以在 render里判断：

render() {
  let component = <Login />;
  if (isLogin) {
    component = <Logout />;
  }
  
  return component;
}

Answer 5

一楼正解，使用？:判断