React fragment에 주요 소품을 추가할 수 있습니까?

React fragment에 주요 소품을 추가할 수 있습니까?

생성 중dl반응:

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

경고 메시지가 나타납니다.

경고:목록의 각 아이들은 고유한 "키" 받침대를 가지고 있어야 합니다.

경고는 삭제되지만 원하는 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파편을 떠받치다<> </>).

어떻게 이 문제를 해결할 수 있을까요?

---

리액트 사용 중16.12.0.

fragment에 키를 추가하려면 full fragment 구문을 사용해야 합니다.

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

https://reactjs.org/docs/fragments.html#keyed-fragments 에서 문서를 참조해 주세요.

네, fragment의 단축 버전에서는 불가능한 fragment(</>)의 키를 아래 형식으로 추가할 수 있습니다.

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

참조용

이 방법을 사용하여 구성 요소 목록에 키를 자동으로 할당할 수도 있습니다.

React.Children.toArray(someData.map(data=><div>{data.name}</div>))

언급URL : https://stackoverflow.com/questions/59390955/can-i-add-a-key-prop-to-a-react-fragment