React: 클릭한 행 데이터만 열기

Question

저는 fullText이라는 상태 변수를 정의했습니다.

fullText 默认值为 false 기본값은 false입니다.

전체 텍스트를 클릭하면 상태 값을 반전시켜 텍스트를 닫고 열 수 있게 만들고 싶습니다. 하지만 클릭하면 테이블에 있는 모든 행의 텍스트가 열립니다. 어떻게 행별로 만들 수 있습니까?

{
  !this.state.fullText ?

       <div onClick={() => this.setState({ fullText: !this.state.fullText })} 
       className="text-primary cursor-pointer font-size-14 mt-2 px-2"  
        key={props.data?.id}>
                Full Text 
        </div>
         :
         <>
       <div onClick={() => this.setState({ fullText: !this.state.fullText 
          })}className="text-primary cursor-pointer font-size-14 mt-2 px-2" 
          key={props.data?.id}>
                 Short Text 
       </div>
               <span>{ props.data?.caption}</span>
        </>
          }

Answer 1

질문의 코드 예제는 모든 줄에 대해 반복되는 것 같지만, 1개의 상태만 fullText （CodeSandbox 中的 showMore) 모든 코드에 공통됩니다. 그래서 모두 함께 켜지거나 꺼집니다.

각 행에 별도의 열기/닫기 기능을 적용하려면 행당 하나의 상태가 필요합니다. 간단한 해결책은 이 상태를 각 행의 데이터에 포함시키는 것입니다.

으아악