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

Question

我正在制作一个具有 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

Answer 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

Answer 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 变量来放置您的评分。

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

React | How to Dynamically Render Limited Numbers of a Component

javascript

sorting

for-loop

enumeration

reactjs