javascript - 单击按钮时有条件地渲染组件(React)

Question

我创建了一个基本的 React 项目，它从 SQL 服务器提取数据。我希望能够根据单击的按钮有条件地呈现。

这是我的显示用户组件，在我的 AdminViewUsers 组件中使用(实际显示用户的组件)。

import React, { Component } from 'react';
import './customers.css';

class DisplayUsers extends React.Component{
  constructor(){
    super();

    this.state= { users: [] } 
  }
  componentDidMount(){
   this.setState({
      users: this.getItems()
   })
  }

  getItems(){
fetch('/admin-view-users')
.then(recordset => recordset.json())
.then(results => { console.log(results.recordset); this.setState({'users': results.recordset}); });

  }

  render () {

    console.log(this.state.users)
    return (
    <ul>
      {this.state.users && this.state.users.map(function(user, index){

        //if (user.severity === 1){          
        return(
          <div className ="jumbotron">
        <li>
          Severity: {user.severity}
        </li>
        <li>
          <p>User Name:{user.name} </p>
        </li>

        <li>
        User Email: {user.email}
        </li>
        <li>
          Description of Issue: {user.description} 
          </li>
          <button>See Details</button>
          </div>
        )
        })
         } 
     </ul>   
    );    
  }
}

export default DisplayUsers; 

这是我的 AdminViewUsers 组件

import logo from '../codestone logo.png';
import {Link } from 'react-router-dom'
import '../bootstrap.min.css'

import '../bootstrap.min.css'
import '../App.css'

import  Customers  from "../Components/customers";
import  DisplayUsers  from "../Components/DisplayUsers";

import { ButtonDropdown, DropdownToggle, DropdownMenu, DropdownItem, DropDownButton } from 'reactstrap';

function Home() {
  return (

      <div> 
        <Header/>
        <SeveritySelector/>
        <DisplayUsers/>
     </div>
  );
}

function Header(){
    return (
      <div class="jumbotron">
        <div className = "User-Menu">
      <Link>User details  </Link>
      </div>
      <img className='profile-image' alt='icon' src={logo} width="340" height="60"/>
     <Navigation/>
    </div>
      )
    }

    function Navigation (){
      return(
        <div>
          <br/>
          <div class="btn-group">
     <Link to= '/home'><button type="button" class="btn btn-light">Home</button></Link>
     <Link to= '/admin-view-users'><button type="button" class="btn btn-light">View Users(Admin)</button></Link>
    </div>
      </div>
      )
    }

    function SeveritySelector (){
      return(
         <div className = "Severity-Toolbar">
        <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
        <div class="btn-group mr-2" role="group" aria-label="First group">
        <button type="button" class="btn btn-secondary">Severity High</button>
        <button type="button" class="btn btn-secondary">Severity Medium</button>
       <button type="button" class="btn btn-secondary">Completed</button>
       <button type="button" class="btn btn-secondary">View All</button>
  </div>
        </div>
        </div>
      )
    }

  export default Home;

本质上，我想使用功能严重性选择器来决定如何显示语句。例如，如果选择高严重性按钮，那么它将显示所有具有高严重性(1)的内容，如果选择中等则显示所有中等严重性严重性 (2) 并完成，严重性为 3。最后一个按钮显示全部。

您认为最好的方法是什么？我知道我可以在“server.js”中使用多个语句并加载不同的查询并将它们连接到不同的页面。

但是有没有一种方法可以让我只使用 if 语句或类似的东西来确定选择哪个按钮以避免与服务器进行多个事务？您可以看到我在显示用户中使用 if 语句进行的简短尝试，该语句有效但不依赖于按钮。

Answer 1

条件渲染可以使用多种技术来实现，最常用的是括号样式变体。可以通过以下方式使用:

function Header(){
    const showFirst = true;

    return (
      <div class="jumbotron">
         {showFirst && <MyFirstComponent />}
         {!showFirst && <MySecondComponent />}
       </div>
      )
    }

这将渲染 <MyFirstComponent />如果showFirst为 true 并将显示 <MySecondComponent />如果是假的。