javascript - 如何在reactjs中使用条件语句渲染组件？

Question

这个问题已经有答案了:

Is it possible to use if...else... statement in React render function? (24 个回答)

已关闭 5 年前。

这是我的示例代码。

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 .