react-window 并检测列表项大小的变化

Question

因此，我一直在尝试为 react 中的大列表找出解决方案。我几乎有了完美的解决方案 - 但我似乎无法弄清楚如何让这一细节发挥作用。

我有一个想要快速渲染的卡片列表 - 我正在使用 react-window 包

import{VariableSizeList as List} from 'react-window';

我有一个名为 MaterialCard 的组件，以及一个包含 MaterialCard 列表的组件：

在 MaterialCard 上，如果您单击检查按钮 - 它会打开卡片的内部，显示表单输入部分。

const [cardOpen, setCardOpen] = useState(false);
const cardInnards = //a bunch of jsx.

//in the return
<button className="btn-inspect" onClick={()=>setCardOpen(!cardOpen)}>inspect/edit</button>
{cardOpen?cardInnards:<div></div>}

在多列表组件容器中 - 我有这段代码。

const materialCardsNew = materialsNew.map((x,i)=><MaterialCard props={x} key ={`${i}matsnew`} />);
//react-window function to make a row:
const Row = array=> ({ index }) => array[index] //is MaterialCard

//in the return
<List
  height={755}
  itemCount={materialCardsNew.length-1}
  itemSize={()=>130} // this is where I'm having trouble.
  width={634}
>
{Row(materialCardsNew)}
</List>

目前 itemSize 是我正在尝试修复的...

目前发生的情况是该项目具有固定大小的区域，它出现在其中 - 并且（感谢 z-index）内脏出现在列表中的其他项目之上。

我想要发生的是打开的 MaterialCard 的项目大小 - 更大的大小：这样它不会覆盖其他卡片 - 我希望它扩展并且我不希望它覆盖其他卡片。

我的麻烦是我不知道如何从顶部读取组件的内部状态 - 我如何在列表容器组件中确定打开了哪个卡。我知道我需要一个函数......但是：嗯......

我想出的伪代码是这样的：这当然行不通——但这或多或少是我想做的。

//resize function
const getHeight = (arr)=>(index)=>arr[index].state.cardOpen?500:100; //bigger size if the card is open

//jsx
itemSize={getHeight(materialCardsNew)}
        
//I've also tried arr[index].style.height,
//and searched through the arr[index] properties in the console to see 
//if there was anything I could use... no luck.

我的第一个想法是愚蠢的......我不太确定如何解决这个问题......我很确定我不应该为每个材料卡阵列都需要一个巨大的额外阵列（有一些类别）来跟踪哪些卡片是打开的......但我似乎无法找到正确的方法。

我该如何做到这一点？

Answer 1

对于这个问题：

我的麻烦是我不知道如何读取组件的内部状态 从上到下

提升状态。因此，在包含组件中，您可以像在顶级组件中一样使用钩子：

const [activeCard, setActiveCard] = useState()

并在卡片中，传入函数：

<Card setActiveCard={setActiveCard} key={someKey} {...otherProps}/>

而且，在卡片的实现中，你可以有类似的东西：

useEffect(() => setActiveCard(key), [key])

顶级组件将具有“活动”卡片信息。

不确定我是否完全清楚这个问题，但这是将子信息发送给父级的一种机制。

而且，如果我理解这个问题，你可以在子组件中有一些逻辑来检查活动卡是否等于卡：

<Card setActiveCard={setActiveCard} activeCard={activeCard} key={someKey} {...otherProps} />

useEffect(() => activeCard === key ? setComponentSize(activeSize) : setComponentSize(defaultSize), [{dependency array}])

当然，setComponentSize 将位于顶级组件中，并以与在顶级中设置卡片索引类似的方式传递。如果所有内容都设置在包含（父组件）中，您只需检查index 与activeCard。

最后，只要确保您正在检查活动卡、清理并调用 setActiveCard(-1)，或者当活动卡的状态发生变化时您可能想要使用的任何默认参数。