preface

The purpose of this article is to share a specific practice that relates to the position of my ranking in various situations.

graphic




Analysis of the

There are 8 kinds of effects provided by the design draft, respectively 4 kinds of 4 nodes and 4 kinds of 5 nodes. Starting with the DOM, the simple solution is to put each node in the view in a 4+4 fashion, then control its style and show and hide. Style part mainly concerns 1 is four or five nodes 2 current if the node is the user’s ranking shows that 1 is the main consideration of four or five nodes 2 ranking of the current user can get a sort of nodes Therefore, only need to know the user ranking and our 4 nodes of the node array to judge, Two utility functions are also required.

Tool function

Relevant only to business logic, independent of components, and removed to constant.js, preferably in a domain model file

/ * * * *@param {*} */
export const judgePrizeIndex = (rank) = > {
   const judgeArray = [1.10.20.50];
   let prizeIndex = 1
   let hasFind = false
   if(! rank) { prizeIndex =5
       return prizeIndex
   } 
   judgeArray.forEach((item, index) = > {
       if(rank <= item && ! hasFind) { prizeIndex = index +1;
           hasFind = true
       } else if (rank > item && index === 3) {
           prizeIndex =5; }});return prizeIndex
};

export const judgeIsCertain = rank= > { 
   const judgeArray = [1.10.20.50];
   return judgeArray.includes(rank)
}
Copy the code

The style part takes into account the attributes of the node and the results of the above two utility functions, and also needs to define a utility function

   const certainClass = (currentIndex, flag) = > {
            let className = "item";
            if (isCertain) {
                className += " four";
                if (currentIndex === prizeIndex) {
                    className += " current"; }}else {
                className += " five";
                if(currentIndex === prizeIndex && ! flag) { className +=" current"; }}return className;
        };
Copy the code

Component design for the label

import React from "react";
import { judgePrizeIndex, judgeIsCertain } from '.. /constant'
import './rankLabel.scss'
/ * * * *@param {*} props
 * @description Separate label display awards */
const RankLabelList = (props) = > {
    const { rank, auth,score } = props;
    console.log('auth',auth)
    const isCertain = judgeIsCertain(rank)
    const prizeIndex = judgePrizeIndex(rank)
    const certainClass = (currentIndex,flag) = > { 
        let className = 'item'
        if (isCertain) {
            className += ' four'
            if (currentIndex === prizeIndex) {
                className += ' current'}}else { 
            className += ' five'
            if(currentIndex === prizeIndex && ! flag) { className +=' current'}}return className

    }

    return (
        <div className="left" id='ranklabellist'>
            <div className={certainClass(1,true)}>
                <div className="rank">First place</div>
                <div className="prize">5 g</div>
            </div>{/* Middle position */} {prizeIndex === 2 &&! isCertain &&<div className={certainClass(2,false)}>
                <div className="rank">{`第${rank}名`}</div>
                <div className="prize">66 yuan red envelope in cash</div>
            </div>}
            <div className={certainClass(2,true)}>
                <div className="rank">10th</div>
                <div className="prize">66 yuan red envelope in cash</div>
            </div>{/* Middle position */} {prizeIndex === 3 &&! isCertain &&<div className={certainClass(3,false)}>
                <div className="rank">{`第${rank}名`}</div>
                <div className="prize">16 yuan red envelope in cash</div>
            </div>}
            <div className={certainClass(3,true)}>
                <div className="rank">20</div>
                <div className="prize">16 yuan red envelope in cash</div>
            </div>{/* middle position */} {prizeIndex === 4 &&! isCertain &&<div className={certainClass(4,false)}>
                <div className="rank">{`第${rank}名`}</div>
                <div className="prize">6 yuan red envelope in cash</div>
            </div>}
            <div className={certainClass(4,true)}>
                <div className="rank">50</div>
                <div className="prize">6 yuan red envelope in cash</div>
            </div>{/* Last position */} {prizeIndex === 5 &&! isCertain &&<div className={certainClass(5)}>{/* Add an empty div to center a single element */} {! score &&<div className="blank-ele" />
                }
                <div className="rank">{! score ? 'not joined ':(score.valid? '${rank} name' :' unauthenticated ')}</div>{ score&&! score.valid &&<div className="rank" style={{marginTop:5}}>Regardless of the ranking</div>}
            </div>}
        </div>
    );
};
export default RankLabelList;
Copy the code

Rocket design

For the position of the rocket, because it directly corresponds to 8 cases, its judgment logic is slightly different. It is only necessary to obtain the correct style name by a similar strategy mode stitching. R1 represents the four graphs starting with four nodes, r2 represents the four graphs starting with five nodes, and then the corresponding graphs of 1 and 2 can be carried out according to the rankings obtained.

import React from "react";
import { judgePrizeIndex, judgeIsCertain } from '.. /constant'
import './rocketProgress.scss'
const RocketProgress = props= > {
   const { rank } = props

   const isCertain = judgeIsCertain(rank)
   const prizeIndex = judgePrizeIndex(rank)
   let rocketIndex  = ' '
   if (isCertain) {
      rocketIndex = 'r1-'+prizeIndex
   } else { 
      rocketIndex = 'r2-'+prizeIndex
   }
   

   return <div className={'rocketProgress middle '+rocketIndex} id='rocketProgress'></div>



}
export default RocketProgress
Copy the code

Score and award components design

import React, { Component } from "react";
import { judgePrizeIndex, judgeIsCertain } from ".. /constant";
// import phoneImg from ".. /.. /.. /assets/images/phone.png";
import "./scorelist.scss";
/ * * *@description List of scores */
class ScoreList extends Component{


    render() {
        const { scoreList, score, rank } = this.props;
        
        const isCertain = judgeIsCertain(rank);
        const prizeIndex = judgePrizeIndex(rank);
        const strUtil = (time) = > {
            if (time > 9) {
                return time
            } else {
                return '0' + time
            }
        }
        const toStandTimeStr = (millseconds) = > {
            if(! millseconds) {return
            }
            const diff = millseconds / 1000
            const hours = parseInt(diff / 3600)
            const mins = parseInt((diff - hours * 3600) / 60)
            const secs = diff - hours * 3600 - mins * 60
            return strUtil(hours) + ":" + strUtil(mins) + ":" + strUtil(secs)
        }
        const certainClass = (currentIndex, flag) = > {
            let className = "item";
            if (isCertain) {
                className += " four";
                if (currentIndex === prizeIndex) {
                    className += " current"; }}else {
                className += " five";
                if(currentIndex === prizeIndex && ! flag) { className +=" current"; }}return className;
        };
        return (
            <div className="right" id="scorelist">
                <div className={certainClass(1, true)} >
                    <img src={! certainClass(1, true).includes('current') ? '//static.aistarfish.com/front-release/file/F2020080710383285700006456.prize-phone-1.png' :'/ /static.aistarfish.com/front-release/file/F2020080710383286000000120.prize-phoe2.png'} alt="" className="prize-img" />
                    <span className="value phone">{scoreList[0] ? scoreList[0].score : '--'}</span>
                    <span className="score">points</span>
                    <span className="time">{scoreList[0] ? scoreList[0].time : '--:--:--'}</span>
                    <span className='flag'>My grades</span>
                </div>{/* prizeIndex === 2 &&! isCertain &&<div className={certainClass(2, false)} >
                        <img src={! certainClass(2, false).includes('current') ? '//static.aistarfish.com/front-release/file/F2020080710533527700002186.66. PNG' :'/ /static.aistarfish.com/front-release/file/F2020080710533527700002186.66. PNG'} alt="" className="prize-img money" />
                        <span className="value">{score? .score}</span>
                        <span className="score">points</span>
                        <span className="time">{toStandTimeStr(score? .duration)}</span>
                        <span className='flag'>My grades</span>
                    </div>}
                <div className={certainClass(2, true)} >
                    <img src={! certainClass(2, true).includes('current') ? '//static.aistarfish.com/front-release/file/F2020080711265619300004779.66 - dark. PNG' :'/ /static.aistarfish.com/front-release/file/F2020080710533527700002186.66. PNG'} alt="" className="prize-img money" />
                    <span className="value">{scoreList[1] ? scoreList[1].score : '--'}</span>
                    <span className="score">points</span>
                    <span className="time">{scoreList[1] ? scoreList[1].time : '--:--:--'}</span>
                    <span className='flag'>My grades</span>
                </div>{/* Middle position */} {prizeIndex === 3 &&! isCertain && (<div className={certainClass(3, false)} >
                        <img src={! certainClass(1, true).includes('current') ? '//static.aistarfish.com/front-release/file/F2020080710533528000002839.16. PNG' :'/ /static.aistarfish.com/front-release/file/F2020080710533526900008129.16-2. PNG'} alt="" className="prize-img money" />
                        <span className="value">{score? .score}</span>
                        <span className="score">points</span>
                        <span className="time">{toStandTimeStr(score? .duration)}</span>
                        <span className='flag'>My grades</span>
                    </div>
                )}
                <div className={certainClass(3, true)} >
                    <img src={certainClass(3, true).includes('current') ? '//static.aistarfish.com/front-release/file/F2020080710533528000002839.16. PNG' :'/ /static.aistarfish.com/front-release/file/F2020080710533526900008129.16-2. PNG'} alt="" className="prize-img money" />
                    <span className="value">{scoreList[2] ? scoreList[2].score : '--'}</span>
                    <span className="score">points</span>
                    <span className="time">{scoreList[2] ? scoreList[2].time : '--:--:--'}</span>
                    <span className='flag'>My grades</span>
                </div>{/* middle position */} {prizeIndex === 4 &&! isCertain && (<div className={certainClass(4, false)} >
                        <img src={certainClass(4, false).includes('current') ? '//static.aistarfish.com/front-release/file/F2020080710533527100005234.6. PNG' :'/ /static.aistarfish.com/front-release/file/F2020080710533530600000032.6-2. PNG'} alt="" className="prize-img money" />
                        <span className="value">{score? .score}</span>
                        <span className="score">points</span>
                        <span className="time">{toStandTimeStr(score? .duration)}</span>
                        <span className='flag'>My grades</span>
                    </div>
                )}
                <div className={certainClass(4, true)} >
                    <img src={certainClass(4, true).includes('current') ? '//static.aistarfish.com/front-release/file/F2020080710533527100005234.6. PNG' :'/ /static.aistarfish.com/front-release/file/F2020080710533530600000032.6-2. PNG'} alt="" className="prize-img money" />
                    <span className="value">{scoreList[3] ? scoreList[3].score : '--'}</span>
                    <span className="score">points</span>
                    <span className="time">{scoreList[3] ? scoreList[3].time : '--:--:--'}</span>
                    <span className='flag'>My grades</span>
                </div>{/* prizeIndex === 5 &&! isCertain && (<div className={certainClass(5)}>{/* if there is a score, show the score; No grades show no; * /}<img src={'/ /static.aistarfish.com/front-release/file/F2020081016411701700006037.theme-zqyn.png'} alt="" className="prize-img money" />
                        <span className="value">{score ? score.score : '0'}</span>
                        <span className="score">points</span>
                        <span className="time">{score ? toStandTimeStr(score? .duration) : '00:00:00'}</span>
                        <span className='flag'>My grades</span>
                    </div>
                )}
            </div>); }};export default ScoreList;

Copy the code

summary

The final solution adopted in this article is to extract the utility function, provide all its cases directly in the DOM, and then decide whether to present and display the required classes and data based on the results returned by the utility function. In the internal design of components, due to the lack of time, part of the code of each item is redundant, which can be simplified for components when removed. If you’re interested, you can also try the direct tool function to compute the correct list, including all the correct conditions directly within each item. Welcome to pay attention to my language knowledge base, 1000+ technical documents summary, covering the front-end of all aspects of knowledge and quality resources, and share their daily work income.

The original link: www.yuque.com/robinson/de…