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

您忘记了返回声明

// 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/

Answer 2

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

（React）JSX中foreach循环中的if-else语句

2 个答案: