[解決済み] Reactのフラグメントにkey propを追加することはできますか？

質問

私は dl をReactで生成しています。

      <dl>
        {
          highlights.map(highlight => {
            const count = text.split(highlight).length - 1;

            return (
              <>
                <dt key={`dt-${highlight.id}`}>{highlight}</dt>
                <dd key={`dd-${highlight.id}`}>{count}</dd>
              </>
            );
          })
        }
      </dl>

これで警告が出ました。

警告 リスト内の各子供は一意の "key" プロパティを持つ必要があります。

これは警告を取り除きますが、私が望むHTMLを生成しません。

      <dl>
        {
          highlights.map(highlight => {
            const count = text.split(highlight).length - 1;

            return (
              <div key={highlight.id}>
                <dt>{highlight}</dt>
                <dd>{count}</dd>
              </div>
            );
          })
        }
      </dl>

を追加することはできません。 key を追加することはできません。 <> </> ).

どのようにこれを回避することができますか？

私はReactを使用しています 16.12.0 .

どのように解決するのですか？

フラグメントにキーを追加するには、フラグメントの完全な構文を使用する必要があります。

<React.Fragment key={your key}>
...
</React.Fragment>

ドキュメントはこちら https://reactjs.org/docs/fragments.html#keyed-fragments