我有一个table
列表,其中每一行都有一个menu
按钮,我需要一个ref
. 我在我的项目中使用 react mui,它是menu。我尝试过像这样创建参考:
const {rows} = props;
const refs = Array.from({length: rows.length}, a => React.useRef<HTMLButtonElement>(null));
然后尝试map
在每个上使用这样的函数内部button
:
<Button
ref={refs[index]}
aria-controls="menu-list-grow"
aria-haspopup="true"
onClick={() => handleToggle(row.id)}
>Velg
</Button>
<Popper open={!!checkIfOpen(row.id)} anchorEl={refs[index].current} keepMounted transition disablePortal>
{({TransitionProps, placement}) => (
<Grow
{...TransitionProps}
style={{transformOrigin: placement === 'bottom' ? 'center top' : 'center bottom'}}>
<Paper id="menu-list-grow">
<ClickAwayListener onClickAway={(e) => handleClose(e, refs[index].current)}>
<MenuList>
<MenuItem
onClick={(e) => handleClose(e, refs[index].current)}>Profile</MenuItem>
<MenuItem onClick={(e) => handleClose(e, refs[index].current)}>My account</MenuItem>
<MenuItem onClick={(e) => handleClose(e, refs[index].current)}>Logout</MenuItem>
</MenuList>
</ClickAwayListener>
</Paper>
</Grow>
)}
</Popper>
但是,然后我得到一个错误:
不能在回调中调用 React Hook “React.useRef”。React Hooks 必须在 React 函数组件或自定义 React Hook 函数中调用 react-hooks/rules-of-hooks
我怎样才能动态地做到这一点,以便我可以在 map 函数中使用 refs。我已经尝试过答案中的建议,但我无法让它发挥作用。这是示例的代码框。