Material-UI 如何在 MenuItem 中使用 forwardRef答案

【问题标题】：Material-UI how to use forwardRef in MenuItemMaterial-UI 如何在 MenuItem 中使用 forwardRef
【发布时间】：2021-03-12 08:35:42
【问题描述】：

如果在 Array.map 中返回 MenuItem，当我按下 Select 时会出错。

代码

const MenuItems: React.FC<{ items: number[] }> = (props) => {
  const { items } = props;
  return (
    <>
      {items.map((i) => {
        return (
          <MenuItem key={i} value={i}>
            {i}
          </MenuItem>
        );
      })}
    </>
  );
};

错误

Warning: Function components cannot be given refs. Attempts to access this ref will fail.
Did you mean to use React.forwardRef()?

所以想改写成forwardRef，但是不知道ref的类型。是否可以首先对 MenuItem 使用 forwardRef ？

谢谢。

【问题讨论】：

从您向我们展示的代码中很难判断您的问题是什么。里面没有使用 refs，也许你可以告诉我们你试图在哪里传递 refs 或者你的 items 道具上有什么？
我想避免深度嵌套，但我收到一条消息，提示需要 forwardRef。我不知道该怎么做。

标签： reactjs typescript material-ui

【解决方案1】：

问题：`Select` 和 `MenuItem` 之间的分离

Material UI Select 组件 expects 将 MenuItem 组件作为其直接子级。它会将ref 传递给它的孩子。在您的情况下，Select 的子级将是您的MenuItems 组件，它不接受ref。我不建议在这里进行 ref 转发。相反，您需要重新设计组件结构，使Select 和映射的MenuItem 之间没有分离。

这是一个例子：

import { MenuItem, Select, SelectProps } from "@material-ui/core";
import React, { useState } from "react";

type MyMenuProps = {
  items: number[];
  value: number;
} & Pick<SelectProps, "onChange">;

const MyMenu: React.FC<MyMenuProps> = (props) => {
  const { items, value, onChange } = props;
  return (
    <Select value={value} onChange={onChange}>
      {items.map((i) => {
        return (
          <MenuItem key={i} value={i}>
            {i}
          </MenuItem>
        );
      })}
    </Select>
  );
};

export default function App() {
  const [value, setValue] = useState(1);
  return (
    <MyMenu
      value={value}
      onChange={(e) => setValue(parseInt(e.target.value))}
      items={[1, 2, 3, 4]}
    />
  );
}

【讨论】：

问题：Select 和 MenuItem 之间的分离

问题：`Select` 和 `MenuItem` 之间的分离