Question

我知道有一些关于此的帖子，但是我正在使用与typescript和react-router v4的反应旁边的所有我想要的是帮助使下面的代码正常工作..

export default class Layout extends React.Component<{ appState: AppState }, {}> {
  render() {
    return (
      <Router children={appState}>
        <Login appState={appState} />
        <div className="main-content">
          <Home />
        </div>
      </Router>
    );
  }
}

loginComponent：

export default class Login extends React.Component<{ appState: any }, {}> {
  render() {
    return (<LoginComponent />);
  }
}

是的，它抛出了＃34;一个路由器可能只有一个子元素＆＃34;例外。如果用户登录othwerwise登录组件

，如何设置条件渲染主组件

EDITED：届时AppState（mobx）

export class AppState {
    @observable public username: any = null
    @observable public password: any = null
    @action setUsername(username:any){
      this.username=username;
    }
    @action setPassword(password:any){
      this.password=password;
    }

}

Answer 1

我无法理解哪一个是登录值。但你的问题是一般的＆＃34;条件＆＃34;问题。

 const CheckLogin =  this.username==null ? "NotValid" : "Logined"

它应该可以帮助您了解如何将此代码转换为您的系统

react-TS如果您已经登录，如何隐藏登录组件

1 个答案: