如何使仅这些道具传递到组件，其中组件是根据开关决定的

Question

我有这个组件，它可以是任何NumberRating，StarRating，PollRating组件，因为组件是根据我的代码中的switch语句决定的。

其中一个组件 NumberRating ，只有最大值作为它可以接收的道具，而StarRating可以接收最大值和最小值，而Poll不能接收两者中的任何一个。

在这种情况下，如何将道具传递给我的组件？

renderBlock = () => {
  let Component;
  let ratingType = this.props.item && this.props.item.ratingType;
  if (ratingType !== null) {
    switch (ratingType) {
      case "1":
      default:
        Component = NumberRating;
        break;
      case "2":
        Component = NumberRating;
        break;
      case "3":
        Component = StarRating;
        break;
      case "4":
        Component = PollRating;
        break;
    }
  }
  // to this component I need to pass props .Also sometimes in my item i may have maximum and at times ,I may not minimum associated with item.
  return <Component />;
};

Answer 1

您可以利用switch逻辑来确定要渲染的组件的 props 和类型：

renderBlock = () => {
  let Component;
  let ratingType = this.props.item && this.props.item.ratingType;
  if (ratingType !== null) {
    switch (ratingType) {
      default:
      case "1":
      case "2":
        return <NumberRating maximum={this.props.maximum} />;
      case "3":
        return (
          <StarRating
            maximum={this.props.maximum}
            minimum={this.props.minimum}
          />
        );
      case "4":
        return <PollRating />;
    }
  }
};

Answer 2

renderBlock = () => {
  let Component;
  let ratingType = this.props.item && this.props.item.ratingType;
  const props = {};
  if (ratingType !== null) {
    switch (ratingType) {
      case "1":
        Component = NumberRating;
        props.maximum = this.props.maximum;
        break;
      case "2":
        Component = NumberRating;
        break;
      case "3":
        Component = StarRating;
        props.maximum = this.props.maximum;
        props.minimum = this.props.minimum;
        break;
      case "4":
        Component = PollRating;
        break;
      default:
        break;
    }
  }
  return(
    <Component {...props}/>
  );
}

Answer 3

我从其中一个答案中获得了帮助，这就是对我有用的.

renderBlock=()=>{
        let Component;
        let ratingType=this.props.item && this.props.item.ratingType;
        const props={};
        if(ratingType!==null){
            switch(ratingType){
                case '1':default:
                    Component=NumberRating
                    if(this.props.item.maximum)
                        props.maxRating=this.props.item && this.props.item.maximum
                    break;
                case '2':
                    Component=NumberRating;
                    if(this.props.item.maxRating)
                        props.maxRating=this.props.item && this.props.item.maximum
                    break;
                case '3':
                    Component=StarRating;
                    if(this.props.item.maximum)
                        props.maxRating=this.props.item && this.props.item.maximum
                    if(this.props.item.minimum)
                        props.value=this.props.item && this.props.item.minimum
                    break;
                case '4':
                    Component=PollRating;
                    break;
            }
        }

        return(
            <Component {...props}
            />
        );
    }