Question

我正在尝试使用按钮加载其他React组件。在使用Firebase与GitHub进行身份验证时可以使用，但不适用于此页面。

import React from 'react';
import './index.css';
import GamePage from '../Game';

class Home extends React.Component {
  constructor(props){
    super(props);
    this.LoadGamePage = this.LoadGamePage.bind(this);
  }
  LoadGamePage() {
    return(
      <div>
        <GamePage />
      </div>
    )
  }
  render(){
    return(
      <div className="home">
        <h1>Home Page</h1>
        <button onClick={this.LoadGamePage}>Play PIT</button>
      </div>
    )
  }
}

export default Home;

我的LoadGamePage函数有问题吗？

Answer 1

它应该如何工作？您有一个onclick处理程序，该处理程序将调用类方法。该类方法称为LoadGamePage，返回JSX。 Okey，但是现在呢？它被返回，但是...未呈现。它不会在任何地方显示。我会建议你什么？我将设置状态，然后根据状态决定是否渲染游戏页面，而不是在该处理程序中返回JSX。

class Home extends React.Component {
  constructor(props){
    super(props);

    this.state = {
      gameVisible: false,
    }

    this.LoadGamePage = this.LoadGamePage.bind(this);
  }

  LoadGamePage() {
    this.setState({ gameVisible: true });
  }

  render() {
    if (this.state.gameVisible) {
       return <GamePage />
    }

    return (
      <div className="home">
        <h1>Home Page</h1>
        <button onClick={this.LoadGamePage}>Play PIT</button>
      </div>
    )
  }
}

Answer 2

我认为您可能想使用react-router将该组件加载到新页面。有关如何使用的信息，请参见this post。

加载新页面

2 个答案: