반응 가상화를 사용하여 반응적인 수의 열로 목록/그리드를 만드는 방법은 무엇입니까?

Question

나는 세트 방식으로 오브젝트에 대한 데이터를 제공하는 "카드"구성 요소를 가지고 있습니다.

이 카드 구성 요소에는 미리 정의 된 폭과 높이가 있습니다.

이러한 카드 구성 요소가 목록으로 표시되며, 목록에서 사용 가능한 가로 공간을 사용하고 싶습니다.

필자는 응답하여 열 수를 변경하고자합니다. 예 : 부모 구성 요소가 3 열에 대해 너무 좁아지면 2 열을 사용하여 삭제되어야합니다.

개념적으로 이것은 매우 쉽게 달성 할 수 있습니다. 구성 요소 크기는 잘 알려져 있으므로 직접 크기를 측정 할 필요가 없으며 목록의 너비에 맞을 수있는 구성 요소의 수를 계산하는 것이 쉽습니다 (열 수 제공).

display:flex을 사용하고 계산 및 레이아웃을 수행하는 옵션이 있습니다.

저는이 응용 프로그램의 다른 상황에서 이미 사용하고 있으므로이 응답 형 열 목록을 얻기 위해 현재 react-virtualized을 사용하려고합니다. 가상화에 대한 지원은 또한 강력한 유인입니다.

masonry 레이아웃은 우리가 원하는 것을 제공하는 것처럼 보였지만 나는 "작동하지 않습니다".

CellMeasurerCache에는 고정 너비 또는 고정 높이가 필요합니다. 내 구성 요소의 너비와 높이가 모두 고정되어 있으므로 측정이 불필요합니다. cellPositioner가 columnWidth을 필요로

은 내가 CellMeasurerCache에 대한 fixedWidth을 사용 나는 그 변경할 필요가있을 거라 생각하는 것이 좋을 것 생각했습니다.

여기 내 코드입니다 : 나는 카드를 렌더링했다는 것을 알게되었다, 그러나 단 하나의 열이 였고, 벽돌 구성 요소는 카드 구성 요소에 스타일로 height:auto;을 적용 무엇

import * as React from 'react'; 
import * as ReactDOM from 'react-dom'; 
import { RouteComponentProps } from 'react-router-dom'; 
import { AutoSizer, Masonry, WindowScroller, CellMeasurer, CellMeasurerCache, MasonryCellProps, createMasonryCellPositioner } from 'react-virtualized'; 
import { Task } from '../../store/tasks'; 
import { TaskCard } from './taskcard'; 

type TaskCardListProps = { 
    scrollElement?: any; 
    tasks: Task[]; 
}; 

type TaskCardListState = {}; 

export class TaskCardList extends React.Component<TaskCardListProps, TaskCardListState> { 
    public render() { 
     const { tasks, scrollElement } = this.props; 

     const cache = new CellMeasurerCache({    
      defaultHeight: 120, 
      defaultWidth: 400, 
      fixedWidth: true 
     }); 

     const cellPositioner = createMasonryCellPositioner({ 
      cellMeasurerCache: cache, 
      columnCount: 2, 
      columnWidth: 400, 
      spacer: 10 
     }); 

     const cellRenderer = (props: MasonryCellProps) => { 
      const { index, key, parent, style } = props; 
      const task = tasks[index]; 

      return (
       <CellMeasurer cache={cache} index={index} key={key} parent={parent}> 
        <TaskCard { ...task } /> 
       </CellMeasurer> 
      ) 
     }; 

     return (
      <Masonry 
       autoHeight={false} 
       cellCount={tasks.length} 
       cellMeasurerCache={cache} 
       cellPositioner={cellPositioner} 
       cellRenderer={cellRenderer} 
       height={1000} 
       width={1500} 
      /> 
     ); 
    } 
} 

! 그 말은 카드가 미스 모양이되도록 내 고정 높이를 지나쳤습니다.

왜 하나의 열만 렌더링하는지, 두 개가 렌더링되지 않는 이유는 확실하지 않습니다. Masonry 구성 요소에 설정 한

.ReactVirtualized__Masonry 요소는 1000px의 높이를 가지고 있지만 아이, ReactVirtualized__Masonry__innerScrollContainer는 335px;의 높이가, 그리고 그 이유를 잘 모르겠지만, 그것은 '카드를 "차단"그 볼 수 있습니다.

오전 나는 벽돌에 분명히 뭔가 잘못하고?

벽돌은 잘못된 선택이고 react-virtualized 내에 더 좋은 옵션이 있습니까?

손톱으로 망치를 사용하려고하는데, 처음부터 무언가를 만들어야합니까?

Answer 1

이 카드 구성 요소에는 미리 정의 된 너비와 높이가 있습니다.

모든 카드의 너비와 높이가 같은가요? 그렇다면 Masonry 구성 요소가 필요하지 않습니다. pinterest.com과 같은 유스 케이스 용입니다. (나는 실제로 그것들을 위해 실제로 만들었습니다.)

당신이 설명하는 것은 덜 복잡하므로보다 효율적인 방법으로 할 수 있습니다. Here's an example의 경우 List을 사용하여 설명 된 UI 유형을 구축하십시오.

각 카드의 크기가 다른 경우 Masonry은 올바른 구성 요소입니다.

CellMeasurerCache에는 고정 너비 또는 고정 높이가 필요합니다. 내 구성 요소의 너비와 높이가 모두 고정되어 있으므로 측정이 불필요합니다.

불행히도 이것은 사실입니다. Masonry 구성 요소를 Pinterest의 유스 케이스에 맞게 특별히 구축하여 일반이 아닌 이 빠른이 될 수있을만큼 최대한 최적화하려고했습니다.