React条件渲染中如何让重复的partOfSpeech词性仅渲染一次？

DevOps 小满

2026-10-2

实现思路

先对所有释义按词性的字母顺序排序
用reduce方法按词性分组，相同词性的释义聚合到同一个数组中
渲染时先遍历词性分组，每组仅输出1次词性标题，再遍历该分组下的所有释义生成列表项，避免词性重复展示

完整代码示例

import React from 'react';

// 你的组件内部逻辑
const DefinitionList = (props) => {
  // 1. 先按词性排序再分组
  const groupedDefinitions = props.data.definitions
    .sort((a, b) => a.partOfSpeech.localeCompare(b.partOfSpeech))
    .reduce((acc, currentDef) => {
      const pos = currentDef.partOfSpeech;
      // 该词性首次出现时初始化空数组
      if (!acc[pos]) {
        acc[pos] = [];
      }
      // 将当前释义推入对应词性分组，如需保留其他字段可直接push(currentDef)
      acc[pos].push(currentDef.definition);
      return acc;
    }, {});

  // 2. 把分组对象转为数组方便遍历，顺序已保持字母序
  const definitionGroups = Object.entries(groupedDefinitions);

  return (
    <ol className={classes.ol}>
      {definitionGroups.map(([partOfSpeech, definitions], groupIndex) => (
        // 带key的Fragment不能用<>短语法
        <React.Fragment key={groupIndex}>
          {/* 每个分组仅展示一次词性标题 */}
          <h3>{partOfSpeech}</h3>
          {/* 遍历当前词性下所有释义 */}
          {definitions.map((definition, defIndex) => (
            <li 
              key={`pos-${groupIndex}-def-${defIndex}`} 
              className={classes.list}
            >
              {definition.charAt(0).toUpperCase() + definition.slice(1)} ({partOfSpeech})
            </li>
          ))}
        </React.Fragment>
      ))}
    </ol>
  );
};