根据值更改.map的输出

Question

我的标题可能没有多大意义，但基本上我想达到的目的是

每次我的.map运行。我希望它在以后的下一个迭代中吐出常规的“ star”，我希望它吐出“ star-left”。

我正在创建一个评分组件，并决定使用半颗星作弊，并在每次需要时将其翻转。所以基本上我有星星的“切片”。但是我不确定如何使用.map或什至可以使用.map

此外，如果您能给我一些提示，让我知道如何保留它的价值。就像第一个“星号”为0.5，然后“左星号”为1，依此类推。

import React, { useState } from 'react'
import {FaStarHalf} from "react-icons/all";
import './Rater.css'


const Rater = () => {
    const [rating, setRating] = useState(null)
    const [hover, setHover] = useState(null)
    const [value] = useState(100)
    const [iconValue, setIconValue] = useState(5)


    return (
        <div>
            <select onChange={(e) =>
            {setIconValue(Number(e.target.value))}}>
                { Array.from(new Array(value),(value, index) =>
                    index + 1).map(value => <option
                    key={value} value={value}>{value}</option>) }
            </select>
            <h1> Select Amount of Icons </h1>

            {[... Array(iconValue)].map((icon, i) => {
                const value = i + 1

                return (
                    <label>
                        <input type='radio'
                           name='rating'
                           value={value}
                           onClick={() => setRating(value)}
                        />
                        <FaStarHalf
                            className='star'
                            color={value <= (hover || rating) ? '#ffc107' : '#e4e5e9'}
                            size={100}
                            onMouseEnter={() => setHover(value)}
                            onMouseLeave={() => setHover(null)}
                        />
                    </label>
                )
            })}
            {[... Array(iconValue)].map((icon, i) => {
                const value = i + 1

                return (
                    <label>
                        <input type='radio'
                            name='rating'
                            value={value}
                            onClick={() => setRating(value)}
                        />
                        <FaStarHalf
                            className='star-left'
                            color={value <= (hover || rating) ? '#ffc107' : '#e4e5e9'}
                            size={100}
                            onMouseEnter={() => setHover(value)}
                            onMouseLeave={() => setHover(null)}
                        />
                    </label>
                )
            })}
        </div>
    )

}

export default Rater

Answer 1

将初始数组加倍并按原样映射（删除第二个数组和映射），但是在数组索引上使用模数2来确定偶数/奇数，并相应地设置交替的类名。 i % 2 === 0是偶数，i % 2 !== 0是奇数。

className={i % 2 ? "star-left" : "star"}

组件

const Rater = () => {
  const [rating, setRating] = useState(null);
  const [hover, setHover] = useState(null);
  const [value] = useState(100);
  const [iconValue, setIconValue] = useState(5);

  return (
    <div>
      <select
        onChange={e => {
          setIconValue(Number(e.target.value));
        }}
      >
        {Array.from(new Array(value), (value, index) => index + 1).map(
          value => (
            <option key={value} value={value}>
              {value}
            </option>
          )
        )}
      </select>
      <h1> Select Amount of Icons </h1>

      {[...Array(iconValue), ...Array(iconValue)].map((icon, i) => {
        const value = i + 1;

        return (
          <label>
            <input
              type="radio"
              name="rating"
              value={value}
              onClick={() => setRating(value)}
            />
            <FaStarHalf
              className={i % 2 ? "star-left" : "star"}
              color={value <= (hover || rating) ? "#ffc107" : "#e4e5e9"}
              size={100}
              onMouseEnter={() => setHover(value)}
              onMouseLeave={() => setHover(null)}
            />
          </label>
        );
      })}
    </div>
  );
};

[注：由于将数组加倍，所以实际的额定值是状态中设置值的一半。

我没有您的样式表，所以这是一个快速/粗糙的演示