(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 语句的内容时，它也 returns 我的数据。但是，当我使用 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>
);

你可以看到这个 fiddle 同样的逻辑： https://jsfiddle.net/69z2wepo/94452/

Answer 2

问题出在你的箭头函数中，当使用块语法（箭头后面的{}s）时，你需要使用return关键字指定返回值。

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

(React) If-else statement in foreach loop in JSX

reactjs

react-jsx