Выполнить расчет в компоненте более высокого порядка в реагировать

Question

У меня есть приложение реагирования, в котором я хочу выполнить условную проверку, а заданное значение определенного процента - это заданное значение.

На данный момент я отображаю компонент Match в моем основном компоненте следующим образом

                <Match 
                inputName={this.state.inputName}
                inputSname={this.state.inputSname}
                percentage={this.state.percentage}
                result={this.state.result}
                show={this.state.showResult}
                />

Я хочу проверить процент соответствия компонента, поэтому у меня есть компонент MatchWrapper, который является компонентом более высокого порядка, предоставляя дополнительную поддержку моему следующему компоненту.

import React, {Component} from 'react'
const MatchWrapper = WrappedComponent =>{
return class MatchWrapper extends Component{    
    state = {
        type: ''
    } 

    componentDidMount(){
    console.log(this.props.percentage)
    let type = ''
        switch(this.props.percentage){
            case this.props.percentage > 75:
                type="succes";
                break;
            case this.props.percentage > 50 && 75 > this.props.percentage:
                type="mediocre";
                break;
            case this.props.percentage < 50:
                type="failure123";
                break;
        }
        this.setState({
            type: type
        })
    }
    render(){
    return(
     <div>
    <WrappedComponent type={this.state.type} {...this.props}/>
</div>
)
}
}
}
export default MatchWrapper;

в моем компоненте соответствия (который является функциональным компонентом и отображает только значения)

import React, {Component} from 'react'
import './Match.css';
import MatchWrapper from '../HOC/MatchWrapper'
import './Match.css';

const match = (props) =>{


console.log(props.show)
console.log(props.type)
return(
    <div>
{props.show ?
<div>
    <h1>Hello!</h1>
    <p>{props.inputName} Du har sgu scoret en jackpot</p>
    <p>{props.inputSname} Er sgu en laks udover det sædvanelige!</p>
    <p>I har scorede hele {props.percentage} procent</p>
    <p>Jeg synes du skulle invitere hende på data med det samme</p>   
</div>  
: null} 
</div>
)
}
export default MatchWrapper(match)

Здесь я хочу console.log заданного типа реквизита, но вычисление не корректно, так как оно ничего не отображает ИЛИ базовый случай, если в операторе switch задан регистр по умолчанию. Как я могу улучшить свою логику, чтобы я правильно выполнял вычисления внутри моего HOC?

РЕДАКТИРОВАТЬ: я понял, проблема в том, что мой HOC не получает реквизит, но я не уверен, почему?

Компонент любви, который отображает соответствие:

import React, {Component} from 'react';
import axios from 'axios'
import './Love.css'
import  Match from './Matches/Match'
import MatchWrapper from './HOC/MatchWrapper';

class Love extends Component{

    state= {
        inputName: '',
        inputSname: '',
        percentage: 0,
        result: '',
        showResult: false
    }

    componentDidMount(){
        console.log('hello')
    }

    findMatchHandler = () =>{
    axios.get(`https://love-calculator.p.mashape.com/getPercentage?fname=${this.state.inputName}&sname=${this.state.inputSname}`,{
        headers: {
           "X-Mashape-Key": "cZA91FBSWlmshegV4IsGJIcGoc3yp1Eq9cCjsnjMGOVB35Z1Ud",
           "Accept": "application/json"
        }
       }).then(res =>
           this.setState({
               name: res.data.fname,
               sName: res.data.sname,
               percentage: res.data.percentage,
               result: res.data.result,
               showResult: true
           })
           )
           }

render(){

      console.log(this.state.percentage)
      console.log(this.state.showResult)
        return(

            <div className={"main-div " + (this.state.percentage > 75 && this.state.showResult ? "match " : ' ') + (this.state.percentage > 50  && this.state.percentage < 75 && this.state.showResult === true ? 'semi ' : ' ') + (this.state.percentage < 50 && this.state.showResult ? 'no-match': '')}>

                    <button onClick={this.findMatchHandler}>Find love!</button>
                    <input type="text" value={this.state.inputName} onChange={(event) => this.setState({inputName: event.target.value, showResult: false})} placeholder="enter your name"/>
                    <input type="text" value={this.state.inputSname} onChange={(event) => this.setState({inputSname: event.target.value, showResult: false})} placeholder="enter your name"/>



                    <Match
                    inputName={this.state.inputName}
                    inputSname={this.state.inputSname}
                    percentage={this.state.percentage}
                    result={this.state.result}
                    show={this.state.showResult}
                    />
               </div>
        )
}
}
export default Love

Answer 1

Он получает реквизит просто отлично.

Проблема с вашим switch заявление. Ваш case выражения приводят к true или же false так вот что должно быть в switch

switch (true) {
  case this.props.percentage > 75:
    type = "succes";
    break;
  case this.props.percentage > 50 && 75 >= this.props.percentage:
    type = "mediocre";
    break;
  case this.props.percentage <= 50:
    type = "failure123";
    break;
}

(также добавлено = во второй и третий дела, чтобы не было необработанных дел)