React-window: HTML 테이블 요소 사용

나는 이것이 실제로 작동하지 않을 것이라고 생각합니다. 내가 아는 한, HTMLTableElement 는 윈도우 구성 요소에 필요한 방식으로 오버플로를 지원하지 않습니다. 스타일을 display: block _ 변경할 수 있지만 _ 여전히 제대로 작동하지 않을 것 같습니다. ( 여기에 예가 있습니다.)

왜 테이블이 필요한가요? 인라인 블록이나 플렉스 레이아웃으로 동일한 열 레이아웃을 얻을 수 있다고 생각합니다.

몇 가지 추가 사항 :

• width 에서 List 까지 필수 매개 변수를 지정하지 않았습니다.
• key 를 행에 추가 할 필요가 없습니다.
• itemSize 는 30 가 아닌 () => 30 (조금 더 나은 성능을 발휘 함).

빠른 답변 감사합니다.
우리는 이미 그것을 div로 재 작성하는 것에 대해 논의했지만 이것은 기존의 다소 큰 구성 요소를위한 것이므로 재 작성을 시작하기 전에 확인하고 싶었습니다. rc-table에 대한 다른 의견을 보았으므로 작동해야한다고 생각했습니다.
어쨌든, 재 작성은 신경 쓰지 마세요. 그만한 가치가 있다고 생각합니다.

행에 키가없는 키에 대한 React 경고를 받았는데, 이는 itemKey를 설정하는 것을 고려할 때 혼란 스러웠으므로 거기에서 무슨 일이 일어나는지 잘 모르겠습니다.

감사

Einar

2018 년 9 월 21 일 16:52에 Brian Vaughn [email protected] 은 다음과 같이 썼습니다.

나는 이것이 실제로 작동하지 않을 것이라고 생각합니다. 내가 아는 한 HTMLTableElement는 윈도우 구성 요소에 필요한 방식으로 오버플로를 실제로 지원하지 않습니다. display : block 스타일을 변경할 수 있지만 여전히 제대로 작동하지 않을 것이라고 생각합니다.

왜 테이블이 필요한가요? 인라인 블록이나 플렉스 레이아웃으로 동일한 열 레이아웃을 얻을 수 있다고 생각합니다.

몇 가지 추가 사항 :

List에 필요한 매개 변수 너비를 지정하지 않았습니다.
행에 키를 추가 할 필요가 없습니다.
itemSize는 () => 30이 아닌 30 일 수 있습니다 (조금 더 잘 수행됨).
—
스레드를 작성했기 때문에 수신 한 것입니다.
이 이메일에 직접 답장하거나 GitHub에서 보거나 대화 목록을 음소거하세요.

행에 키가없는 키에 대한 React 경고를 받았는데, 이는 itemKey를 설정하는 것을 고려할 때 혼란 스러웠으므로 거기에서 무슨 일이 일어나는지 잘 모르겠습니다.

이것은 예상되지 않습니다. (Code Sandbox를 통해) 재현 사례를 나와 공유 할 수 있습니까?

오, 죄송합니다. itemKey 함수가 일부 항목에 대해 undefined 를 반환 한 경우에만 _ 예상 될 것임을 추가해야합니다.이 경우 해당 함수에 대한 수정이 필요합니다.

@bvaughn 나는 오버플로 지원이 제한 요소 인 것에 대해 구체적으로 찾지 못했습니다. 흥미롭게도 그게 뭔지 알고 싶습니다. 두 가지 모두에 대한 핵심 기능을 지원하는 것이 지루할 수 있다는 것을 확실히 알고 있지만, 기본 목록 요소가 현재 구현 자의 선택에서 벗어난 모든 것 같습니다. 나 자신과 고정 헤더 시나리오와 함께 반응 창을 사용하는 모든 사람을 위해 말하면 테이블 레이아웃에 내장 된 고유 한 테이블 형식 지원을 얻는 것이 좋을 것입니다. display : table을 사용하면 "일부"개발 오버 헤드가 발생하며 우연히 테이블을 사용하여 빌드 될 수있는 주변 애플리케이션을위한 일회성 레이아웃입니다. 나는 항상 css를 통해 오버플로 또는 기타 속성을 조정할 수 있습니다 (어쨌든 현재 구현에서 수행하고 있습니다). elementType 소품이 문제가되지 않습니까?

@bvaughn 나는 오버플로 지원이 제한 요소 인 것에 대해 구체적으로 찾지 못했습니다.

내가 최고의 문구를 사용하지 않았을 수도 있지만 내가 연결 한 샌드 박스 ( rrn61wkzwm )를 보면 예상치 못한 동작을 보게 될 것입니다.

다음은 HTML 인 또 다른 예입니다. lx65871p69

HTMLSelectElement ( <tbody> )는 height 및 overflow 와 같은 스타일을 무시하므로 창에 쓸모가 없습니다. 표시 모드 ( display: block )를 변경하여이 문제를 "수정"할 수 있지만 HTMLTableElement 사용 목적은 열 크기 조정 동작을 손상시키기 때문에 무효화됩니다.

이 열 크기 조정 동작은 크기가 열의 내용에 따라 다르기 때문에 (사용자가 스크롤 할 때 변경됨) 창 사용 사례에서 시작하기 위해 깨졌습니다.

그러나 그것은 기본 목록 요소가 현재 구현 자의 선택에서 벗어난 모든 것처럼 보입니다 ... elementType prop이 문제입니까?

당신이 정말로 원하는 경우 태그 유형을 이미 지정할 수 있습니다 ( 2j0z718mwy ).

나 자신과 고정 헤더 시나리오와 함께 반응 창을 사용하는 모든 사람을 위해 말하면 테이블 레이아웃에 내장 된 고유 한 테이블 형식 지원을 얻는 것이 좋을 것입니다.

HTMLTableElement 사용하면 위에서 설명한 이유로 문제가 될 수 있습니다. 고정 헤더가있는 표 / 그리드 레이아웃을 원한다면 일반 목록 구성 요소 중 하나를 사용하여이를 수행 할 수 있습니다. pk78pvwnkx

왜 테이블이 필요한가요? 인라인 블록이나 플렉스 레이아웃으로 동일한 열 레이아웃을 얻을 수 있다고 생각합니다.

일부 접근성을 위해 테이블 ​​구조가 필요할 수 있습니다 (예 : 의미없는 div에 비해 더 나은 화면 읽기)? 나는 여기에서 추측하고있다.

이 경우 CSS 표시 스타일과 테이블 요소에 고유 한 다른 스타일을 재정의 할 것입니다.

약 9 년 전에 복잡한 테이블 구성 요소 (상단 및 왼쪽의 고정 / 고정 머리글, 복잡한 colspan / rowspan 구조 및 그 뒤에있는 구조를 설명하는 데이터 모델 포함)를 구축 한 경험이 있습니다. 가상화가 없다는 것을 기억하는 한)이 구성 요소를 담당했던 동료가 적절한 테이블 요소에서이를 구현하려고 시도했고 레이아웃이 특정 방식으로 작동하도록 강제하는 데 어려움을 겪은 다음 순수한 JavaScript로 테이블 레이아웃을 구현하기로 결정했습니다. 절대 위치 및 크기가 지정된 div. 이 솔루션은 완벽하게 작동했습니다. 이상한 레이아웃 점프, 부드러운 스크롤 (행 / 열당 아님) 등입니다.

일부 접근성을 위해 테이블 ​​구조가 필요할 수 있습니다 (예 : 의미없는 div에 비해 더 나은 화면 읽기)? 나는 여기에서 추측하고있다.

Aria 역할을 사용할 수 있습니다 😄

철저히 감사합니다. 당신은 단지 하나의 문제를 해결하는 프로토 타입을 시도하여 다른 문제를 만들어 내기 위해 토끼 굴로 내려가는 나를 구했습니다.

안녕하세요
새 스레드를 만드는 대신 기존 스레드를 찾으려고했습니다. 좋은 곳에 있었으면 좋겠어요 ...

FixedSizeGrid 대해 두 개의 셀을 병합하기 위해 일종의 "colspan"을 사용하는 방법이 있습니까?
이 질문은 여기 에서 시작된 또 다른 토론에 의존하지만 더 이해하기 위해 여기에 게시하는 것을 선호합니다.

FixedSizeGrid에 대해 두 개의 셀을 병합하기 위해 일종의 "colspan"을 사용하는 방법이 있습니까?

아니요. 지원되지 않습니다.

@einarq @BlaineBradbury @sompylasar 여전히 관심이 https://window-table.netlify.com/ 에서 라이브 데모를 볼 수 있습니다.

내가 테이블 태그를

나는 브라이언에게이 구현에 대해 어떻게 생각하는지 태그를 달고 물어보고 싶었다 (그는 html 테이블 태그가 작동하지 않는다고 언급했기 때문에). 그러나 그는 이미 나를 충분히 도왔습니다. 그래서 여러분들에게 맡기겠습니다.

감사합니다.

@pupudu는 흥미로운 접근 방식입니다. 헤더와 행에 대해 별도의 <table> 태그를 갖는 것에 대한 접근성 문제가 있는지 모르겠지만 그렇지 않으면 깔끔한 아이디어입니다.

react-datasheet 와 함께 react-window react-datasheet 을 사용하려고하는데 기본적으로 작동합니다.

function sheetRenderer(props) {
  const Row = ({ index, style }) => (
    React.cloneElement(props.children[index], { style })
  );
  return (
    <table className={props.className}>
        <tbody>
          <FixedSizeList
              height={150}
              itemCount={1000}
              itemSize={35}
              width={300}
          >
            {Row}
          </FixedSizeList>
        </tbody>
    </table>
  )
}

export default function EntityTable(props: IEntityTableProps) {
  const initialGrid = useMemo(() => {
    return getTableGridFromCSV(props.entityListCSV);
  }, [props.entityListCSV]);
  const [modifiedGrid, updateModifiedGrid] = useImmer(initialGrid);
  return (
    <ReactDataSheet
      data={modifiedGrid}
      sheetRenderer={sheetRenderer}
      valueRenderer={cell => cell.value}
      onCellsChanged={changes => {
        updateModifiedGrid(draft => {
          changes.forEach(({ cell, row, col, value }) => {
            draft[row][col].value = value || '';
          });
        });
      }}
    />
  );
}

function getTableGridFromCSV(csv: string) {
  return csv.split('\n').map(row =>
    row.split(',').map((cell, index) => {
      if (index === 0) {
        return {
          value: cell,
          forceComponent: true,
          component: <button onClick={() => console.log(cell)}>{cell}</button>,
        };
      }
      if (index === 2) {
        return {
          value: cell,
        };
      }
      return {
        value: cell,
        component: <span>{cell}</span>,
      };
    }),
  );
}

렌더링, 유일한 문제는 Warning: validateDOMNesting(...): <tr> cannot appear as a child of <div>. index.js:1437 Warning: validateDOMNesting(...): <div> cannot appear as a child of <tbody>.

이봐, 나는 React-Table로 이것을 시도하고 있으며 테이블 요소 대신 div를 사용해야한다는 것을 알았습니다. 이것의 문제는 재질 / 부트 스트랩과 같은 스타일링 라이브러리가 이러한 요소에 의존한다는 것입니다. 따라서 내 테이블 스키마를 테이블 요소 대신 div로 변경하는 것이 훨씬 더 많은 작업입니다. 표 요소를 사용하여 비교하는 것이 가능합니까 아니면 지금 나만의 스타일을 만들어야합니까?

@simkessy 이미 눈치 채지
https://window-table.netlify.com/

@pupudu 저는 여러분의 오픈 소스 노력에 박수를

아주 작은 코드와 많은 창의력으로 이것을 해낼 수있었습니다. 코드는 누구나 복사 / 붙여 넣기 및 원하는대로 확장 할 수있을만큼 간단합니다. @bvaughn 방법 을 알아 낸 후 원하는 경우 라이브러리에 추가하는 것은 매우 사소하지만 방법을 알고 있다면 재정의하는 것도 매우 사소합니다.

그것의 부족 :

• 렌더링 후 첫 번째 행의 "상단"스타일 캡처
• 그 값을 React.Context에 저장하여 전달할 수 있습니다.
• 행 자체 대신 이동되는 테이블 구성 요소에 값을 적용하십시오.
• 머리글 및 바닥 글과 같은 항목에 대한 추가 슬롯을 추가하십시오.
• 라이브러리의 인체 공학은 사물이 깔끔하게 전달되는 것을 허용하지 않으므로 React.Context는 교차 구성 요소 통신을 극복하는 영웅입니다.

작업 코드 샌드 박스 : https://codesandbox.io/s/react-window-with-table-elements-d861o

참조 용 코드

import React from 'react'
import { useState, useRef, useContext } from 'react'
import { FixedSizeList, FixedSizeListProps } from 'react-window'
import { render } from 'react-dom'

/** Context for cross component communication */
const VirtualTableContext = React.createContext<{
  top: number
  setTop: (top: number) => void
  header: React.ReactNode
  footer: React.ReactNode
}>({
  top: 0,
  setTop: (value: number) => {},
  header: <></>,
  footer: <></>,
})

/** The virtual table. It basically accepts all of the same params as the original FixedSizeList.*/
function VirtualTable({
  row,
  header,
  footer,
  ...rest
}: {
  header?: React.ReactNode
  footer?: React.ReactNode
  row: FixedSizeListProps['children']
} & Omit<FixedSizeListProps, 'children' | 'innerElementType'>) {
  const listRef = useRef<FixedSizeList | null>()
  const [top, setTop] = useState(0)

  return (
    <VirtualTableContext.Provider value={{ top, setTop, header, footer }}>
      <FixedSizeList
        {...rest}
        innerElementType={Inner}
        onItemsRendered={props => {
          const style =
            listRef.current &&
            // @ts-ignore private method access
            listRef.current._getItemStyle(props.overscanStartIndex)
          setTop((style && style.top) || 0)

          // Call the original callback
          rest.onItemsRendered && rest.onItemsRendered(props)
        }}
        ref={el => (listRef.current = el)}
      >
        {row}
      </FixedSizeList>
    </VirtualTableContext.Provider>
  )
}

/** The Row component. This should be a table row, and noted that we don't use the style that regular `react-window` examples pass in.*/
function Row({ index }: { index: number }) {
  return (
    <tr>
      {/** Make sure your table rows are the same height as what you passed into the list... */}
      <td style={{ height: '36px' }}>Row {index}</td>
      <td>Col 2</td>
      <td>Col 3</td>
      <td>Col 4</td>
    </tr>
  )
}

/**
 * The Inner component of the virtual list. This is the "Magic".
 * Capture what would have been the top elements position and apply it to the table.
 * Other than that, render an optional header and footer.
 **/
const Inner = React.forwardRef<HTMLDivElement, React.HTMLProps<HTMLDivElement>>(
  function Inner({ children, ...rest }, ref) {
    const { header, footer, top } = useContext(VirtualTableContext)
    return (
      <div {...rest} ref={ref}>
        <table style={{ top, position: 'absolute', width: '100%' }}>
          {header}
          <tbody>{children}</tbody>
          {footer}
        </table>
      </div>
    )
  }
)

/**
 * Render Our Example
 **/
render(
  <VirtualTable
    height={300}
    width="100%"
    itemCount={1000}
    itemSize={36}
    header={
      <thead>
        <tr>
          <th>Index</th>
          <th>Header 2</th>
          <th>Header 3</th>
          <th>Header 4</th>
        </tr>
      </thead>
    }
    row={Row}
    footer={
      <tfoot>
        <tr>
          <td>Footer 1</td>
          <td>Footer 2</td>
          <td>Footer 3</td>
          <td>Footer 4</td>
        </tr>
      </tfoot>
    }
  />,
  document.querySelector('main')
)

@jamesmfriedman 접근 방식을 좋아합니다. 이를 달성하기 위해 Context를 사용하는 정말 흥미로운 아이디어입니다. 두 개, 하나는 헤더 용, 다른 하나는 본문 용으로 렌더링하는 방식과 달리 하나의 테이블 만 렌더링한다는 사실이 마음에 듭니다. 이로 인해 창 테이블 사용자에게 많은 혼란이 발생했습니다.

마음에 들지 않으시면이 아이디어를 창가 테이블에서 사용해 보겠습니다. 가장 큰 도전은 콘텐츠를 기반으로 행의 크기를 자동으로 조정하는 방법을 찾는 것입니다 (적어도 windo-table의 가장 큰 도전이었습니다).

@jamesmfriedman 매우 유망 해 보입니다. @bvaughn 이 접근 방식에 대해 우려 사항이 있습니까?

@jamesmfriedman 헤더가 콘텐츠와 함께 위로 스크롤되는 것 같습니다. 끈적하게 만들 수 있습니까?

실제로 가능하며이 구현에만 국한되지는 않습니다. HTML 테이블 요소를 사용하여 고정 헤더를 검색하기 만하면됩니다. 이 작업을 수행하는 방법은 실제로 TH 요소 위치를 고정하는 것임을 막연하게 기억합니다.

@jamesmfriedman 예를 들어 주셔서 감사합니다 @marink 여기에 고정 헤더에 대한 예가 있습니다 https://codesandbox.io/s/react-window-with-table-elements-jj70e style={{ position: 'sticky', top: 0 }}> 을 추가해야합니다 th 태그

@jamesmfriedman 예를 들어 주셔서 감사합니다. 나는 그것을 사용하는 것을 조사 할 것이다. 하지만 top : 0 과 position sticky를 사용하는 대신 top을 다시 계산하고 테이블 요소에 절대 위치를 갖는 것이 갈 길이라고 생각합니다. 왜냐하면 당신이 위치를 고정하여 th 요소에 고정 헤더를 가져 오면 모든 것이 빠른 스크롤에서 엉망이되기 때문입니다.

따라서 79 행은 <table style={{ top: 0, position: 'sticky', width: '100%' }}>

또한 아래쪽에있을 때 계속 스크롤하는 경우 스크롤 문제가 해결됩니다.

HTML 테이블을 사용하는 또 다른 좋은 이유는 IE11을 지원하기 때문입니다. FixedSizeList 하고 CSS-grid로 스타일을 지정합니다. 그러나 반응 형 열, 크기가 다른 열 등과 같은 다른 기능을 추가하고 모두 IE11과 함께 작동하도록해야하는 경우 엄청난 양의 코드가 생성됩니다. HTML 테이블은 기본적으로 코드없이 작동합니다.

IE11은 더 이상 지원해야하는 것이 아닙니다. :)

모든 FE 개발자는 IE11에 죽음을 원합니다. 하지만 안타깝게도 우리가 상상조차 할 수없는 이유로 움직일 수없는 회사 / 사람들이 있습니다. 바라건대, 앞으로 몇 년 밖에 걸리지 않았 으면합니다. 그 전까지는 원하든 원하지 않든 IE11을 지원해야합니다.

나에게도 삼키기 힘든 약이었다.

@ olafur164 빠른 스크롤에서 깨지지 않는 끈적한 헤더에 대한 수정에 감사드립니다. 매끄럽게하는 것과는 반대로 한 번에 한 행씩 스크롤하므로 "고정 된"모양을 유지하는 방법이 있는지 알고 있습니까?

react-virtualized ( react-window 문제 페이지 일지라도)와 동일한 문제가 나타나는 material-table (가상화와 결합 테이블 요소)이라는 https://github.com/mbrn/ material-table / issues / 891 # issuecomment -681986647. 스타일링 문제 및 validateDOMNesting(...) 경고와 같은 몇 가지 문제가 여전히 있습니다.

@jamesmfriedman 예를 들어 주셔서 감사합니다 @marink 여기에 고정 헤더의 예가 있습니다. th 태그에 style={{ position: 'sticky', top: 0 }}> 을 추가해야합니다.

안녕하세요 @JCofman , CSS 수정을 시도했지만 작동하지 않습니다. 여기에 코드 샌드 박스의 예입니다 - https://codesandbox.io/s/react-window-with-table-elements-forked-huti6?file=/src/index.tsx은 : 514-542

두 가지 문제가 있습니다.

1. 제자리에 스타일이 있음에도 불구하고 헤더가 상단에 고정되지 않습니다.
2. 위쪽 방향으로 크게 스크롤하는 동안 헤더가 깜박이거나 깜박입니다.
   [재현 단계-50 % 아래로 스크롤 한 다음 빠르게 위로 스크롤하고 헤더 이동을 관찰합니다.].

미리 감사드립니다 :)

@jamesmfriedman 접근 방식을 좋아합니다. 이를 달성하기 위해 Context를 사용하는 정말 흥미로운 아이디어입니다. 두 개, 하나는 헤더 용, 다른 하나는 본문 용으로 렌더링하는 방식과 달리 하나의 테이블 만 렌더링한다는 사실이 마음에 듭니다. 이로 인해 창 테이블 사용자에게 많은 혼란이 발생했습니다.

마음에 들지 않으시면이 아이디어를 창가 테이블에서 사용해 보겠습니다. 가장 큰 도전은 콘텐츠를 기반으로 행의 크기를 자동으로 조정하는 방법을 찾는 것입니다 (적어도 windo-table의 가장 큰 도전이었습니다).

내가 사용하고 있기 때문에 매우 비슷한 해결책을 찾기 결국 display: grid 가진 display: contents 행에 대한의 제약에 이렇게 기본적으로,이 부착을 table > tr 요소.

context + refs를 사용하여 내부 메서드를 호출했지만 첫 번째 자식의 style.top 값을 조회하여 동일한 작업을 수행 할 수 있으므로 완전히 불필요합니다.

const Inner = React.forwardRef<HTMLDivElement, React.HTMLProps<HTMLDivElement>>(
  function Inner({ children, ...rest }, ref) {
    const { header, footer } = useContext(VirtualTableContext)
    const {style} = children[0].props;
    return (
      <div {...rest} ref={ref}>
        <table style={style}>
          {header}
          <tbody>{children}</tbody>
          {footer}
        </table>
      </div>
    )
  }
)

스타일 소품은 각 행에 대해 createElement를 수행 할 때 라이브러리에서 제공하고 특정 Row 구성 요소가 style 을 tr 할당하지 않으므로 그들 중 하나를 전달합니다.

최근에 이런 게 궁금 했어요. css 사용자 정의 속성을 통해 의사 요소 (이후 / 이전)를 사용하여 패딩으로 전체 테이블 본문을 이동하면 어떨까요?

react-virtual을 사용하는 예에서 https://codesandbox.io/s/poc-react-virtual-table-jyz0m

내가 원하는 UX를 얻을 수 있도록 테이블이 절대적으로 필요했고 react-window 작동하도록 만드는 해결 방법에 만족하지 못했습니다.

나는 단지 virutalization 로직을 후크로 추출하고 위에 게시 된 것과 유사한 두 개의 테이블로 구현했습니다. 하나는 헤더 용이고 다른 하나는 콘텐츠 용입니다. 내 접근 방식의 차이점은 두 번째 테이블에는 여전히 마크 업에 헤더가 있지만 액세스 할 수 있도록 시각적으로 숨겨져있는 반면 첫 번째 테이블의 헤더는 눈에 띄는 사용자를 위해 위치에 고정되어 있다는 것입니다. 매력처럼 작동하고, 코드는 훨씬 더 간단했습니다.

누군가가 그것을 시도하고 싶을 경우를 대비하여 그냥 던져 버리십시오.

@piecyk virtuoso가 구현되는 방식과 매우 유사합니다. https://virtuoso.dev/grouped-by-first-letter/

절대 / 상단으로 전체 컨테이너를 배치하는 것이 성능이 뛰어나다는 것을 추가해야하지만 Chrome으로 성능 감사를 실행하면 FPS에 영향을 미칠 수있는 CLS 문제가 있습니다. 나는 그 영향이 눈에 띄지 않는다고 생각합니다. https://b6udg.csb.app/ (큰 크기의 컨테이너 임에도 불구하고)이 예제에서 얼마나 빠르고 부드러울 수 있는지 볼 수 있습니다. 그러나 padding-top / bottom에는 CLS가 없습니다!

나는 이것을 직접 시도하고 조만간 차이를 측정 할 것입니다.

@pupudu 저는 여러분의 오픈 소스 노력에 박수를

아주 작은 코드와 많은 창의력으로 이것을 해낼 수있었습니다. 코드는 누구나 복사 / 붙여 넣기 및 원하는대로 확장 할 수있을만큼 간단합니다. @bvaughn 방법 을 알아 낸 후 원하는 경우 라이브러리에 추가하는 것은 매우 사소하지만 방법을 알고 있다면 재정의하는 것도 매우 사소합니다.

_ 그것의 부족 _ :

• 렌더링 후 첫 번째 행의 "상단"스타일 캡처
• 그 값을 React.Context에 저장하여 전달할 수 있습니다.
• 행 자체 대신 이동되는 테이블 구성 요소에 값을 적용하십시오.
• 머리글 및 바닥 글과 같은 항목에 대한 추가 슬롯을 추가하십시오.
• 라이브러리의 인체 공학은 사물이 깔끔하게 전달되는 것을 허용하지 않으므로 React.Context는 교차 구성 요소 통신을 극복하는 영웅입니다.

작업 코드 샌드 박스 : https://codesandbox.io/s/react-window-with-table-elements-d861o

참조 용 코드

import React from 'react'
import { useState, useRef, useContext } from 'react'
import { FixedSizeList, FixedSizeListProps } from 'react-window'
import { render } from 'react-dom'

/** Context for cross component communication */
const VirtualTableContext = React.createContext<{
  top: number
  setTop: (top: number) => void
  header: React.ReactNode
  footer: React.ReactNode
}>({
  top: 0,
  setTop: (value: number) => {},
  header: <></>,
  footer: <></>,
})

/** The virtual table. It basically accepts all of the same params as the original FixedSizeList.*/
function VirtualTable({
  row,
  header,
  footer,
  ...rest
}: {
  header?: React.ReactNode
  footer?: React.ReactNode
  row: FixedSizeListProps['children']
} & Omit<FixedSizeListProps, 'children' | 'innerElementType'>) {
  const listRef = useRef<FixedSizeList | null>()
  const [top, setTop] = useState(0)

  return (
    <VirtualTableContext.Provider value={{ top, setTop, header, footer }}>
      <FixedSizeList
        {...rest}
        innerElementType={Inner}
        onItemsRendered={props => {
          const style =
            listRef.current &&
            // @ts-ignore private method access
            listRef.current._getItemStyle(props.overscanStartIndex)
          setTop((style && style.top) || 0)

          // Call the original callback
          rest.onItemsRendered && rest.onItemsRendered(props)
        }}
        ref={el => (listRef.current = el)}
      >
        {row}
      </FixedSizeList>
    </VirtualTableContext.Provider>
  )
}

/** The Row component. This should be a table row, and noted that we don't use the style that regular `react-window` examples pass in.*/
function Row({ index }: { index: number }) {
  return (
    <tr>
      {/** Make sure your table rows are the same height as what you passed into the list... */}
      <td style={{ height: '36px' }}>Row {index}</td>
      <td>Col 2</td>
      <td>Col 3</td>
      <td>Col 4</td>
    </tr>
  )
}

/**
 * The Inner component of the virtual list. This is the "Magic".
 * Capture what would have been the top elements position and apply it to the table.
 * Other than that, render an optional header and footer.
 **/
const Inner = React.forwardRef<HTMLDivElement, React.HTMLProps<HTMLDivElement>>(
  function Inner({ children, ...rest }, ref) {
    const { header, footer, top } = useContext(VirtualTableContext)
    return (
      <div {...rest} ref={ref}>
        <table style={{ top, position: 'absolute', width: '100%' }}>
          {header}
          <tbody>{children}</tbody>
          {footer}
        </table>
      </div>
    )
  }
)

/**
 * Render Our Example
 **/
render(
  <VirtualTable
    height={300}
    width="100%"
    itemCount={1000}
    itemSize={36}
    header={
      <thead>
        <tr>
          <th>Index</th>
          <th>Header 2</th>
          <th>Header 3</th>
          <th>Header 4</th>
        </tr>
      </thead>
    }
    row={Row}
    footer={
      <tfoot>
        <tr>
          <td>Footer 1</td>
          <td>Footer 2</td>
          <td>Footer 3</td>
          <td>Footer 4</td>
        </tr>
      </tfoot>
    }
  />,
  document.querySelector('main')
)

감사합니다. InfiniteLoader 구성 요소와 함께 이것을 사용하려고 시도한 사람이 있습니까 (성공적으로)? ... 나는 그것을 시도했지만 내부 "래퍼"에 문제가 있습니다. 무한 로더가 예기치 않은 props를 innerElementType에 전달하고 있기 때문이라고 가정합니다.