如何使用reactjs中的条件语句呈现组件？

Question

这是我的示例代码。

import React, { Component } from "react";
import Navpills from "./Navpills";
import Home from "./pages/Home";
import About from "./pages/About";
import Blog from "./pages/Blog";
import Contact from "./pages/Contact";

class PortfolioContainer extends Component {
  state = {
    currentPage: "Home"
  };

  handlePageChange = page => {
    this.setState({ currentPage: page });
  };

  render() {
    return (
      <div>
        <Navpills
          currentPage={this.state.currentPage}
          handlePageChange={this.handlePageChange}
        />
        Based on `this.state.currentPage`, render the appropriate component
        here.
      </div>
    );
  }
}

export default PortfolioContainer;

说明如下：

现在将代码添加到PortfolioContainer，以便根据当前选定的页面，在Navpills组件下方呈现不同的组件。例如：

• 在About

时呈现this.state.currentPage === "About"组件

• 在Blog

时呈现this.state.currentPage === "Blog"组件

• 在Contact

时呈现this.state.currentPage === "Contact"组件

• 在Home

时呈现this.state.currentPage === "Home"组件

Answer 1

您可以使用以下语法有条件地呈现组件：

render() {
    return (
      <div>
        <Navpills
          currentPage={this.state.currentPage}
          handlePageChange={this.handlePageChange}
        />
        {this.state.currentPage === "About" && <About />}
        here.
      </div>
    );
  }

但在您的情况下，最好使用react-router。

Answer 2

有几种方法可以做到这一点React docs在这里有一个例子：https://www.postgresql.org/docs/10/static/brin-intro.html

还有这个包：http://plnkr.co/edit/xroiqBdGOv4phxtnSWbU?p=preview

或者你可以这样简洁的方式： {this.state.currentPage ===＆＃34;关于＆＃34; ＆安培;＆安培; ＆LT;关于/＆gt;}