如何在react jsx元素中的div上添加条件

Question

我有一个 jsx 结构，看起来像

在这里，我为 div 元素添加了item.hideon 。 但我想做的是

 <div className={css.maincon}>
        {switchItems.map(item => (
          { !item.hideOn &&  <div key={item.id} className={css.toggle}>
              <span className={css.toggleLabel}>{item.uncheckedValue}</span>
              <span>
                <Switch
                  key={`${item.id}-switch`}
                  name={item.id}
                  checked={item.isChecked}
                  onChange={e => handleChange(e, item.id)}
                  defaultChecked
                  color='default'
                />
              </span>
              <span className={css.toggleLabel}>{item.checkedValue}</span>              
          </div> }
        ))}
      </div>

这里试图在整个 div 本身上添加 hideOn。 当我尝试这样做时，我收到一个编译时错误':' expected不知道为什么会发生这种情况。 有人可以帮我从这里出去吗。

谢谢。

Answer 1

首先，您可以尝试删除 map 函数中的大括号 {}。 它已经返回，您可以检查语句为 !item.hideOn。

只需尝试删除尖线中的大括号。

{switchItems.map(item => (
  !item.hideOn && (<div key={item.id} className={css.toggle}> // this line <=
    // inside of your div          
  </div>) // and this line<=
))}

如果这不起作用。 试试三元。

!item.hideOn ？ 你的div：空