参考列表Reactjs - 编程之家

如何解决参考列表Reactjs

我有一个Material UI菜单项列表。每个菜单项都有自己的功能，因此我为菜单项指向的每个组件实现了处理程序功能。每个组件的此功能称为 handleFn 。

如果单击菜单项，则应调用此handleFn，然后将运行其特定代码。

这是我的组件的外观（以简化的方式）：

import React,{ FunctionComponent,useState } from "react";
import Component from "Component";
import IconButton from "@material-ui/core/IconButton";
import Menu from "@material-ui/core/Menu";
import MenuItem from "@material-ui/core/MenuItem";
import MoreVertIcon from "@material-ui/icons/MoreVert";
import { Props } from "./types";

const shouldBeEnabled = true;
const menuItems = [
  {
    label: "Test xyz",value: "testxyz",Component: "Component A",},{
    label: "abc",value: "abc",Component: "Component K",];

const TestComp: FunctionComponent<Props> = () => {
  const refs = [];

  return shouldBeEnabled ? (
    <div className={classes.root}>
      <Menu
        id={"bla"}
        anchorEl={null}
        disablePortal={true}
        open={true}
        PaperProps={{}}
      >
        {Array.isArray(menuItems) &&
          menuItems.map((el,i) => {
            return (
              <MenuItem
                key={el.value}
                onClick={() => {
                  const handleFn = refs[i].handleFn;
                  if (typeof handleFn === "function") {
                    handleFn(); // Here I want to call the specific handler function
                  }
                }}
              >
                <Component
                  ref={(currRef) => {
                    refs[i] = currRef;
                  }}
                  key={el.value}
                  MetaComponent={{
                    ...el.Component,}}
                />
              </MenuItem>
            );
          })}
      </Menu>
    </div>
  ) : null;
};

export default TestComp;

问题：数组引用保持为空，不会添加任何项目。

然后我当然尝试了另一种解决方案。

我尝试了以下操作：

const refs = useRef(menuItems.map(() => createRef()));


<Component
                    ref={(ref) => {
                      refs.current.push(ref);
                    }}
                    key={el.value}
                    MetaComponent={{
                      ...el.Component,}}
                  />

但这将导致：

而且我得到一个错误：

index.js：1警告：不能为功能组件提供引用。尝试访问此引用将失败。你是说要使用React.forwardRef（）

然后我尝试了forwardRef，但是它也没有起作用。解决方案是什么？