(React) JSX 中 foreach 循环中的 If-else 语句

Question

所以我有以下几点：

// Build the component HTML.
return (
  <dl className={ classes }>

    {items.map((item, index) =>
      { item.type === 'dd' ?
        <dd key={ index } index={ index }>{ item.text }</dd>
        :
        <dt className="search-result__description-list__description" key={ index } index={ index }>{ item.text }</dt>
      }
    )}

  </dl>
);

问题：什么都没有渲染。数据存在于items. 当我在没有 if-else 语句的情况下简单地记录内容时，它也会返回我的数据。但是，当我使用 if-else 语句时，什么也没有显示。没有错误以太。

有什么想法吗？

Answer 1

你忘记了return语句

// Build the component HTML.
return (
  <dl className={ classes }>

    {items.map((item, index) =>
      { return item.type === 'dd' ?
        <dd key={ index } index={ index }>{ item.text }</dd>
        :
        <dt className="search-result__description-list__description" key={ index } index={ index }>{ item.text }</dt>
      }
    )}

  </dl>
);

你可以看到这个具有相同逻辑的小提琴：https : //jsfiddle.net/69z2wepo/94452/