0

所以我一直在试图找出一个反应大列表的解决方案。我几乎有了完美的解决方案——但我似乎无法弄清楚如何让这个细节发挥作用。

我有一个我想快速渲染的卡片列表 - 我正在使用 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.

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

我该如何做到这一点？

4

1 回答 1

0

对于这个问题：

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

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

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 将位于顶层组件中，并以类似的方式传递给在顶层设置卡片索引。如果所有内容都设置在包含（父组件）中，您只需检查indexvs activeCard.

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

于 2021-02-03T17:44:22.283 回答