时间戳

首页 > 解决方案 > 如何在条件渲染中只渲染一次元素？

reactjs - 如何在条件渲染中只渲染一次元素？

问题描述

<ol className={classes.ol}>
      {props.data.definitions
        .sort((a, b) => a.partOfSpeech.localeCompare(b.partOfSpeech))
        .map((definition, index) => {
          return (
            <>
              <h3>{definition.partOfSpeech}</h3>
              <li key={index} className={classes.list}>
                {definition.definition.charAt(0).toUpperCase() +
                  definition.definition.slice(1)}{" "}
                ({definition.partOfSpeech})
              </li>
            </>
          );
        })}
    </ol>

以上是按字母顺序对“partofSpeech”进行排序并输出带有单词定义的词性的代码。如果词性相同，我试图只显示一次词性。电流输出如下所示。

是否可以在顶部仅显示一次词性并根据该词性呈现列表？我尝试使用 reduce 并比较对象的 partOfSpeech 仍然无法实现我想要的。

这是电流输出

我想要达到的目标：

我想要达到的目标

标签： reactjsjsxconditional-rendering

解决方案

是的，这是可能的，但您必须更改您尝试映射的对象。当前定义的结构为

[{
  "definition": "located at or near the back of an animal",
  "partOfSpeech": "adjective"
}]

您想要的案例结构类似于：

[{
  "partOfSpeech": "adjective",
  "definitions": ["located at or near the back of an animal", "..."],  
}]
// or
[{
  "adjective": ["located at or near the back of an animal", "..."], 
  "adverb": ["in or to or toward a past time", "..."], 
}]

“定义”也可以是数组内的对象，但关键是您需要首先按属性分组，然后有两个迭代器。一个跨partOfSpeech和一个跨“定义”

您可以使用Array函数自己构建分组逻辑或使用lodashgroubBy

// groups by property length
_.groupBy(['one', 'two', 'three'], 'length');
// => { '3': ['one', 'two'], '5': ['three'] }

有关如何分组的更多选项，您还可以查看如何按键分组对象数组

推荐阅读