React 使用 Typescript 创建动态引用

Question

我有一个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。我已经尝试过答案中的建议，但我无法让它发挥作用。这是示例的代码和框。

Answer 1

这是另一种选择：const textInputRefs = useRef<(HTMLDivElement | null)[]>([])...const onClickFocus = (event: React.BaseSyntheticEvent, index: number) => {&nbsp; &nbsp; textInputRefs.current[index]?.focus()};...{items.map((item, index) => (&nbsp; &nbsp; <textInput&nbsp; &nbsp; &nbsp; &nbsp; inputRef={(ref) => textInputs.current[index] = ref}&nbsp; &nbsp; />&nbsp; &nbsp; <Button&nbsp; &nbsp; &nbsp; &nbsp; onClick={event => onClickFocus(event, index)}&nbsp; &nbsp; />}