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

Question

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

截至目前，我在我的主要组件中渲染了一个 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 给定的 prop 类型，但计算不正确，因为它不呈现任何内容或基本情况，如果在 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;
}

(也将=添加到第二个和第三个案例中，这样就没有未处理的案例)

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

Perform calculation in higher order component in reactJS

javascript

reactjs

higher-order-components