Question

我使用的是Reactjs。我想在渲染主页面的同一个地方渲染另一个页面。以下是我的app.js文件的代码。

import React, { Component } from 'react';
import Online from './components/userview';
import Login from './components/login';
import './App.css';

class App extends Component {
  constructor(props) {
    super(props);
    this.handleLogin = this.handleLogin.bind(this);
    this.state = { LoggedIn: false };
  }
  handleLogin(props) {
    this.setState = { LoggedIn: true };
    console.log(this.setstate.LoggedIn);
  }
  render() {
    return (
      <div className="App">
        <div className="header col-lg-12">
          <img
            src={require('../src/images/logo.png')}
            style={{ maxWidth: '80vh', maxHeight: '100vh' }}
          />
        </div>
        <button
          type="button"
          class="btn btn-primary"
          onClick={this.handleLogin}
        >
          Sign In
        </button>&nbsp;
        <button type="button" class="btn btn-info">
          Join Live chat
        </button>
        <Login />
      </div>
    );
  }
}

export default App;

这是我要在app.js的地方呈现的页面。

import React, { Component } from 'react';

export default class Login extends Component {
  render() {
    return (
      <div className="login">
        <form>
          <div>
            <label>Your ID:</label>
            <input type="text" ref="id" />
          </div>
          <br />

          <br />
          <input type="submit" value="submit" />
        </form>
      </div>
    );
  }
}

点击登录按钮后如何呈现此页面？

Answer 1

在您的App渲染方法中，您可以执行以下操作：

if(this.state.LoggedIn) return <Login />

Answer 2

在App组件的render方法中添加以下代码。

render(){
    if(this.state.LoggedIn)
        return <Login />;
    else {
        return(
            <div className="App">
                ....
            </div>
        );
    }
}

检查CodeSandbox

上的工作代码

如何渲染另一个页面onclick

2 个答案: