是否可以按条件对 div 使用 CSS 进行排序

Question

我正在研究与nodejs项目的React。该项目是一个航班应用程序，用户可以在其中关注/取消关注他想要的假期，而当他遵循该假期时 - 应该首先显示（假期是Bootstrap中的卡Divs。）我正处于项目的非常高级的阶段，我想知道是否有任何方法可以通过CSS对DIV进行分类（如果已检查输入或其他内容），因为如果我不必从一开始就开始全部启动。

import React, { Component } from 'react';
    import Switch from "react-switch";
    import apiUrl from './apiUrl';

    class Vacation extends Component {
      state = {
        checked: false,
        vacation: '',
        followdvac: [],
        drawfirst: [],
        drawlast: []
      }

      handleChange(checked, e) {
        debugger;
        var VacationID = e.target.parentElement.parentElement.id
        this.setState({ checked });
        if (checked === true) {
          this.Follow(VacationID)
        }
        else if (checked === false) {
          this.NotFollow(VacationID)
        }
      }

      async Follow(VacationID) {
        let follow = {
          vacid: VacationID
        }
        let response = await fetch(`${apiUrl}/follow?userid=` + this.props.userid, {
          method: 'POST',
          headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
          },
          body: JSON.stringify(follow)
        }); debugger
        let jsonData = await response.json();
        debugger;
        console.log(jsonData)
      }

      async NotFollow(VacationID) {
        let follow = {
          vacid: VacationID
        }
        let response = await fetch(`${apiUrl}/unfollow?userid=` + this.props.userid, {
          method: 'POST',
          headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
          },
          body: JSON.stringify(follow)
        }); debugger
        let jsonData = await response.json();
        debugger;
        console.log(jsonData)
      }
      render() {
        return (

          <div class="col-sm-4 mt-4">
            <div class="card">
              <img class="card-img-top" src="http://www.boostinspiration.com/wp-content/uploads/2011/07/Sun_Photo_01.jpg?__SQUARESPACE_CACHEVERSION=1311474935879" alt="Card image cap" />
              <div class="card-body">
                <h5 class="card-title">{this.props.data.name}</h5>
                <p class="card-text">{this.props.data.description}</p>
              </div>
              <div class="card-footer">
                <h4><b>From: </b>{this.props.data.start} </h4>
                <h4><b>To: </b>{this.props.data.end}</h4>
                <small class="text-muted"><h3><b>Price: </b>{this.props.data.price}$</h3></small>
                <label id={JSON.stringify(this.props.id)} className="Float">
                  <span ></span>
                  <b>Follow</b>:<Switch onChange={this.handleChange.bind(this)} checked={this.state.checked} />
                </label>
              </div>
            </div>
            <br />
          </div>
        )
      }
      async componentDidMount() {
        let AllFollowed = []
        let AllUnfollow = []
        let Response = await fetch(`${apiUrl}/userfollow?id=` + this.props.userid);
        let Followed = await Response.json();
        // let Response1 = await fetch(`${apiUrl}/byorder?id=` + this.props.userid);
        // let Followed1 = await Response.json();
        this.setState({ followdvac: Followed });
        // console.log(Followed1)
        let VACATIONS = this.props.Vacations 
        let Fol = this.state.followdvac
        VACATIONS.map(v => {
          let Filter = Fol.FollowArr.filter(f=>f==v.id)
          if (Filter.length == 0 ){
            AllUnfollow.push(v)
          }
          else{
            AllFollowed.push(v)
          }
        }) 
 this.setState({drawfirst:AllFollowed, drawlast:AllUnfollow}) 


        this.MarkChecked()
      }
      MarkChecked() {
        var id = this.props.id
        debugger;
        for (let i = 0; i < this.state.followdvac.FollowArr.length; i++) {
          if (this.state.followdvac.FollowArr[i] === id) {
            debugger;
            this.setState({ checked: true })
          }
        }
      }

    }
    export default Vacation;

该卡是通过度假阵列映射的...我需要通过检查输入来对其进行排序。（即使已经映射了）

Answer 1

如果您使用反应是的常见pratice>排序一系列元素，然后在render 中反射它。

如果您仍然想出于任何原因与CSS一起使用，请查看此片段：

ul {
  display: flex;
  flex-direction: column;
}
ul li:first-child {
  order: 5;
}
ul li:nth-child(2) {
  order: 4;
}
ul li:nth-child(3) {
  order: 3;
}
ul li:nth-child(4) {
  order: 2;
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>

参考：是否可以使用CSS3？