在reactJS中的高阶组件中执行计算

Question

我有一个React应用程序，在这里我想执行条件检查，而不是给定值的某个百分比的给定值。

到目前为止，我在主组件中渲染了Match组件，例如

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

我想检查match组件的百分比，所以我有一个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给定的prop类型，但是计算不正确，因为如果switch语句中给出了默认大小写，则它不会呈现任何内容或基本情况。 如何改善逻辑，以便在HOC内正确执行计算？

编辑：我认为问题是我的HOC没有收到任何道具，但是我不确定为什么？

呈现匹配项的Love组件：

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;
}

（ 也将=添加到第二和第三种情况，这样就不会出现未处理的情况 ）