javascript - React Js 上的条件 jsx

Question

嗨，我正在尝试用条件渲染以下内容，但由于某种原因我没有得到它:解析错误:意外的标记，应为“，”

在我的 {dropdownItem.map (item => (

<NavLi>
  <Link to={link}>{name}</Link>
  {visibleMenu[name] && dropdownItem &&
  (
    {dropdownItem.map(item=>(
      <ul>
        <li>
          {item}
        </li>
      </ul>
    ))
    }
  )
  }
</NavLi>

我不知道我的结构出了什么问题

Answer 1

您的 JSX 中有额外的花括号。一旦您打开 { 告诉 JSX 您想要计算一个表达式，则无需打开另一个表达式。

<NavLi>
  <Link to={link}>{name}</Link>
  {visibleMenu[name] && dropdownItem &&
    dropdownItem.map(item => (
      <ul>
        <li>
          {item}
        </li>
      </ul>
    ))
  }
</NavLi>