Question

我有一个高阶组件，可以执行一些逻辑并将结果向下传递给功能组件，以显示数据。

在我的主要部分中，我将prop百分比向下传递给我的HOC

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

在我的HOC内

我执行switch语句，并将结果作为道具传递给我的功能组件

import React, { Component } from "react";

const MatchWrapper = WrappedComponent => {
return class MatchWrapper extends Component {
state = {
  type: ""
};

componentDidMount(){

}

createTypeHandler = () =>{
  console.log(this.props.percentage);

  console.log(this.props.show)

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

render() {
    console.log(this.props.show)
    console.log(this.state.type)
    {this.props.show &&
        this.createTypeHandler
    }
  return (

    <div>
      <WrappedComponent type={this.state.type} {...this.props} />
    </div>
  );
};
}
};
export default MatchWrapper;

现在我在哪里呈现我的createTypeHandler有一个问题，我不能将其放在componentDidMount中，因为在组件安装时就已经呈现了它，理想情况下，我们要等待用户传递一些数据。因此，我认为最好的选择是制作一个处理程序，将其执行，道具展示等于true。

但是似乎都不起作用？现在，当用户输入内容后，如何呈现功能或设置“类型”的状态？

Answer 1

由于结果type基于传递的道具，因此您无需将其保持在状态。只需在render方法中进行计算即可。

对于这种组件（不需要使用state或任何生命周期方法的），您可以使用纯组件

import React from "react";

const MatchWrapper = WrappedComponent => (props) => {
  const {show, percentage } = props;
  let type = "";
  switch (true) {
    case percentage > 75:
      type = "succes";
      break;
    case percentage > 50 && 75 >= percentage:
      type = "mediocore";
      break;
    case percentage <= 50:
      type = "failure123";
      break;
  }

  return show && <WrappedComponent {...props, type} />
}

export default MatchWrapper;

请注意，原始代码的主要问题是您没有调用createTypeHandler。您需要添加()来调用方法。 this.createTypeHandler()这样。但是，然后调用从render方法内部更改状态的方法是一个很大的禁忌。在这种情况下，您需要使用componentDidUpdate生命周期方法。但是对于这种情况，根本不使用状态会更简单。

在道具集上的高阶组件内执行逻辑运算

1 个答案: