Question

我正在尝试添加具有不同颜色级别的进度条。我有4种不同的价值选择。我试图使用if / else if特定情况的条件但不起作用。有没有更好的方法。

<ul className="venue-list">
      {searchVenues.map(item => (
        <li className="venue-list__item" key={item.venue.id}>
          <Link
            to={`/venues/${item.venue.id}`}
            className="venue-list__itemLink"
          >
            <div className="venue-list__cover" />
            <img
              src={`${item.venue.photos.groups[0].items[0].prefix}128${item.venue.photos.groups[0].items[0].suffix}`}
              alt="Venue Best Img"
              className="venue-list__image"
            />
            <div className="venue-list__onTopData">
              <h3 className="venue-list__venue-name">{item.venue.name}</h3>
              <div className="venue-list__venueInfo">
                <div className="venue-list__userWrapper">
                  <div className="left">
                    <img src="/image/user-icon.png" alt="Icon" />
                  </div>
                  <div className="right">
                    <span className="user-text">{item.venue.stats.tipCount}</span>
                  </div>
                </div>
                <div className="venue-list__tagWrapper">
                  <div className="left">
                    <img src="/image/tag-icon.png" alt="Icon" />
                  </div>
                  <div className="right">
                    <div className="bar">
                    {
                      if(item.venue.price.tier === 1){
                        return <span className="percentage one"></span>
                      } else if(item.venue.price.tier === 2) {
                        return <span className="percentage one"></span>
                                <span className="percentage two"></span>
                      } else if(item.venue.price.tier === 3) {
                        return <span className="percentage one"></span>
                                <span className="percentage two"></span>
                                <span className="percentage three"></span>
                      } else if (item.venue.price.tier === 4) {
                        return  <span className="percentage one"></span>
                          <span className="percentage two"></span>
                          <span className="percentage three"></span>
                          <span className="percentage four"></span>
                      }
                    }

                    </div>
                  </div>
                </div>
                <div className="venue-list__ratingWrapper">
                  <img src="/image/triangle.png" alt="icon" />
                  <span className="rating-text">{item.venue.rating}</span>
                </div>
              </div>
            </div>
          </Link>
        </li>
      ))}
    </ul>

现在我收到错误＆＃34;语法错误：if语句＆＃34;意外转移。什么是处理地图功能案例的最佳方法。

Answer 1

您可以使用三元运算符

<div className="bar">
                    {
                      item.venue.price.tier === 1?
                     <div> <span className="percentage one"></span></div>
                      :item.venue.price.tier === 2?
                       <div> <span className="percentage one"></span>
                              <span className="percentage two"></div></span>
                      :item.venue.price.tier === 3 ?
                        <div> <span className="percentage one"></span>
                                <span className="percentage two"></span>
                                <span className="percentage three"> 
                              </span></div>
                     :item.venue.price.tier === 4?
                        <div>  <span className="percentage one"></span>
                          <span className="percentage two"></span>
                          <span className="percentage three"></span>
                          <span className="percentage four"></span> </div>
                    :''

                }
                    </div>

Answer 2

{item.venue.price.tier === 1 && <span className="percentage one"></span>}

if / else语句在JSX中不起作用，因为'language'是如何设计来调用/构造对象的。这是如何实现条件渲染。

请记住，您还必须返回一个元素。所以你必须像以下那样对后面的选项进行分组：

<div>
    <span className="percentage one"></span>
    <span className="percentage two"></span>
    <span className="percentage three"></span>
    <span className="percentage four"></span>
</div>

Answer 3

可以通过将节提取到纯函数来解决问题，该函数可以将<span>的集合作为数组返回。这是一种重构代码的方法：

const getPriceTier = (tier = 0) => {
    if (tier > 4) {
        console.log('Config only supports till "percentage four"');
    }

    const config = {
        0: 'one',
        1: 'two',
        2: 'three',
        3: 'four'
    };
    const items = Array.from({ length: tier }, (v, i) => i);
    // items = [0, 1, 2, tier - 1];

    return items.map((i) => {
        return <span className={`percentage ${config[i]}`}></span>
    })
}

然后在渲染中使用它：

<div className="bar">{getPriceTier(item.venue.price.tier)}</div>

希望这有帮助！

Answer 4

为了简化您的示例，您可以使用类似

的内容

const Test = () => {
  const arr = [1,2,3,4]
  return (
    <div>
      {arr.map(e => {
        return (
          (e > 1) ?
          <p key={e}>this is true {e}</p>
          :
          <p key={e}>this is false {-e}</p>
        )
      })}
    </div>
  )
}

Reactjs - 如果map中的条件有多个函数

4 个答案: