reactjs - 在 JS 指令之后反应结合 JSX 元素？

Question

这是我的代码，我想我需要一个操作员来加入，但我不知道是什么

<ul>
{suggestionList.length ? 
    <li className="header">Suggestions</li>
    // <--- compiler says error from here
    suggestionList.map((item) =>
        <li
           key={item.id}
           onClick={this.handleSuggestClick(item)}
           dangerouslySetInnerHTML={{ __html: item.label }}
        />
    )
 : <li><em>No item found</em></li>
}
</ul>

感谢帮助

标签： reactjsjsx

Answer 1

您忘记了.map表达式的范围

<ul>
{suggestionList.length ?
// v React.Fragment
  <>
    <li className="header">Suggestions</li>
//  v start scope {}    
    {suggestionList.map((item) =>
        <li
           key={item.id}
           onClick={this.handleSuggestClick(item)}
           dangerouslySetInnerHTML={{ __html: item.label }}
        />
    )}
 </>
 : <li><em>No item found</em></li>
}
</ul>