根据值更改 .map 的输出

Question

我的标题可能没有多大意义，但基本上我想要实现的是

每次我的 .map 运行。我希望它在那之后的下一次迭代中吐出常规 'star'，我希望它吐出 'star-left.'

我正在创建一个评级组件，并决定通过使用半星来作弊，并在每次需要时翻转它。所以基本上我有 'slices' 颗星星。但我不确定如何使用 .map 或是否可以使用 .map

另外，如果你能给我一些提示，告诉我如何让它保持它的价值。就像第一个 'star' 将是 .5，然后 'star-left' 将是 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 来确定 even/odd 并相应地设置交替类名。 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>
  );
};

注意：由于您将数组加倍，因此实际评级值是状态设置值的一半。

我没有你的样式表，所以这是一个 quick/rough 演示

根据值更改 .map 的输出

Changing the output of a .map depending on the value

javascript

reactjs

react-functional-component