时间戳

首页 > 解决方案 > 为什么我无法导航到下一页？

javascript - 为什么我无法导航到下一页？

问题描述

我试图在Food Truck单击按钮后导航到另一个组件。在nextPage()函数中，我试图做到这一点，但它只是不断地给我一个错误。

单击按钮时如何从页面转到下一个？

注意：我想转到一个完全不同的页面，而不是停留在同一页面上。 

import React, { Component } from "react";
import fire from "../../config/Fire";
import classes from "./Home.css";
import Aux from "../../hoc/Aux";
import Taco from "../../components/taco/Taco";

class Home extends Component {
  constructor(props) {
    super(props);
    this.state = {
      taco: {}
    };
  }

  nextPage() {
    return this.state.taco ? <Taco /> : <Home />;
  }

  render() {
    return (
      <Aux>
        <h1 className={classes.ChooseTruck}>Choose your favorite truck!</h1>
        <button
          type="button"
          className="btn btn-outline-primary btn-lg btn-block"
          onClick={this.nextPage}
        >
          Food Truck
        </button>
      </Aux>
    );
  }
}

export default Home;

标签： javascriptreactjs

解决方案

嘿伙计们，我知道我做错了什么：D如果其他人需要有关如何执行此操作的参考，这就是您有条件地渲染的方式：D。

-我必须在构造函数中绑定 taco，即this.taco = this.taco.bind(this);

-创建一个名为的状态flag并将其设置为等于falseiethis.state {flag: false}

- 在nextPage()方法内部，我必须将状态设置为 true 以便以后使用，即this.setState({flag: true});

-在里面render()，我设置了一个名为flag等于标志状态的变量，即const flag = this.state.flag;最初是假的，但后来在单击调用的按钮时设置为真nextPage()

- 最后，我们检查是否flag设置为 equal true。如果是真的，那么返回我试图导航到的组件<Taco/>

import React, {Component} from 'react';
import fire from '../../config/Fire';
import classes from './Home.css';
import Aux from '../../hoc/Aux';
import Taco from '../../components/taco/Taco';

class Home extends Component {
constructor(props) {
    super(props);
    this.taco = this.taco.bind(this);
    this.state = {
        flag: false
    }
}

nextPage() {
    this.setState({flag: true});
}

render() {
    const flag = this.state.flag;

    if(flag) {
      return <Taco/>;
    }

    return (
        <Aux>
            <h1 className={classes.ChooseTruck}>Choose your favorite truck!</h1>
            <button
                type="button"
                className="btn btn-outline-primary btn-lg btn-block"
                onClick={this.nextPage}>Food Truck
            </button>
        </Aux>
    );
  }
}

export default Home;

推荐阅读