反应 |如何动态渲染有限数量的组件答案

【问题标题】：React | How to Dynamically Render Limited Numbers of a Component反应 |如何动态渲染有限数量的组件
【发布时间】：2021-03-09 02:18:14
【问题描述】：

我正在制作一个评分组件，它有 5 颗星。每颗星星会根据值有不同的符号。

<span>
        <i
          className={
            value >= 1
              ? 'fas fa-star'
              : value >= 0.5
              ? 'fas fa-star-half-alt'
              : 'far fa-star'
          }
        ></i>
      </span>

我不想复制粘贴其中的 5 个并更改值，而是想知道如何使其动态化。使用 Map() 没有意义，因为我没有枚举导入的数据，并且星星的固定限制为 5。

想法：将索引乘以 '1' 并将索引添加到 '0.5'。

完整代码：

import React from 'react';

const Rating = ({ value, text }) => {
  return (
      <span key={index}>
        <i
          className={
            value >= 1
              ? 'fas fa-star'
              : value >= 0.5
              ? 'fas fa-star-half-alt'
              : 'far fa-star'
          }
        ></i>
      </span>
    )
})
}



export default Rating;

//full star = fas fa-star

//empty star = far fa-star

//half-star = fas fa-star-half-alt

【问题讨论】：

刚刚意识到我的想法实际上行不通。如果它从 0 开始，则 1 * 0 = 0 和 0.5 + 0 = 0.5，不起作用。如果它从 1 开始，那么 1 * 1 = 1 和 0.5 + 1 = 1.5，也不起作用。所以 0.5 必须是 -0.5 并且枚举应该从 1 开始。
只需运行一个从1 到floor(star) 的循环，然后检查最后一个半星的循环后是否还有0.5，即star-floor(star)>0

标签： javascript reactjs sorting for-loop enumeration

【解决方案1】：

怎么样

const Ratings = ({value}) => {
  return (
    <div>
      {
        [...Array(5)].map((ignore,ind) => { // you just use indice here
          return (
            <span key={ind}>
              <I
                className={
                  value >= ind + 1
                  ? 'fas fa-star'
                  : value >= ind + 0.5
                  ? 'fas fa-star-half-alt'
                  : 'far fa-star'
                } 
              ></i>
            </span>
          )
        })
      }
    </div>
  )
}
export default Ratings

【讨论】：

我得到了 ''Error: Rating(...): 没有从渲染返回。这通常意味着缺少 return 语句。或者，不渲染任何内容，返回 null。''。可能是因为我使用的是无状态组件。你知道我怎样才能改变你的地图功能以在无状态下工作，因为它对我来说似乎有点 hacky。
import React from 'react'; const Rating = ({ value, text }) => { [...Array(5)].map((ignore, index) => { return ( <span key={index}> <i className={ value >= 1 ? 'fas fa-star' : value >= 0.5 ? 'fas fa-star-half-alt' : 'far fa-star' } ></i> </span> ) }) } export default Rating; //full star = fas fa-star //empty star = far fa-star //half-star = fas fa-star-half-alt
我编辑了直接粘贴的答案

【解决方案2】：

使用map 仍然不是一个坏主意。您可以使用以下代码。并假设变量rating 具有当前值。例如rating = 2.5。

var arr = new Array(5);
var list = arr.map((value, index)=>{
   return (
      <span key={index}>
        <i className={rating<=0.5+index ? 'fas fa-star-half-alt' : rating <= 1+index ? 'fas fa-star' : 'far fa-star'}></i>
      </span>
   );
})

然后您可以使用list 变量来放置您的评分。

【讨论】：