Tanstack Table 및 React JS: React JS 및 Tanstack Table을 사용할 때 상태에 따라 버튼을 표시하거나 숨기는 방법

Question

<p>저는 반응 js를 가지고 있고 tanstack 테이블(react-table)을 구현했습니다. 각 행의 상태에 따라 버튼/링크를 표시하거나 숨기도록 만드는 데 도움이 필요합니다. "승인" 상태가 포함된 행이 있으면 버튼이 표시되고 그렇지 않으면 숨겨질 것이라고 가정합니다. </p> <pre class="brush:php;toolbar:false;">......일부 데이터 초기화 const [sorting, setSorting] = useState<SortingState>([]); const [rowSelection, setRowSelection] = useState({}); const [isApproved, setIsApprove] = useState(false); ...호출 열 const columns = useMemo<ColumnDef<IEvent>[]>( ...열 목록 { accessorKey: "상태", 헤더: () => 상태, 셀: (셀: 임의) => let status = cell.getValue(); return cell.getValue(); }, 활성화 정렬: true, 활성화열필터: 참, }, { accessorKey: "작업", 헤더: () =><span>Action</span> 셀: (셀: 임의) => console.log(isApproved); 반품 ( <div className="inline-flex gap-x-2"> <링크={`./${cell.row.id}/edit`}>수정</Link> <EVSDeleteButton id={cell.row.id} 헤더="이벤트" <링크={`./${cell.row.id}/agenda`}>의제</Link> </div> ); }, 활성화 정렬: 거짓, 활성화열필터: 거짓, },</pre> <p>각 행의 상태에 따라 버튼('일정')을 표시하거나 숨길 수 있기를 원합니다</p>

Answer 1

삼항 연산자, 조건부(삼항) 연산자

를 사용해 본 적이 있나요?

Answer 2

cell.row.original.status 访问每行的 status 값을 사용하여 상태 변수에 저장하는 대신 해당 값을 기반으로 버튼을 표시할 수 있습니다.

으아악