reactjs - 尝试在单独的组件中选择菜单项 - 如何解决 'function components cannot be given refs' 错误？

Question

我正在尝试将选择字段中的菜单项移动到单独的组件，因为我必须两次使用相同的菜单项，这似乎是将它们移动到单独的组件的最佳方式。但它并没有像我期望的那样工作。

这很好用(因为它在同一个组件中):

<TextField
  select
  variant="outlined"
  fullWidth
  label="local menuitems"
  onChange={(e) => {
    console.log("Local running");
    setLocalValue(e.target.value);
  }}
  style={{ width: "100%" }}
  value={localValue}
>
    <MenuItem value="1">MenuItem 1</MenuItem>
    <MenuItem value="2">MenuItem 2</MenuItem>
    <MenuItem value="3">MenuItem 3</MenuItem>
</TextField> 

这不是(因为它是一个单独的组件):

<TextField
  select
  variant="outlined"
  fullWidth
  label="External menuitems"
  onChange={(e) => {
    console.log("External running");
    setExternalValue(e.target.value);
  }}
  style={{ width: "100%" }}
  value={externalValue}
>
    <MenuItems />
</TextField> 

MenuItems 返回:

<Fragment>
  <MenuItem value="1">MenuItem 1</MenuItem>
  <MenuItem value="2">MenuItem 2</MenuItem>
  <MenuItem value="3">MenuItem 3</MenuItem>
</Fragment>

我做了一个 CodePen https://codesandbox.io/s/infallible-wilson-u4so6?file=/src/App.js

第一个示例是在本地使用菜单项，第二个示例是在不同的组件中。菜单项显示正确但它们不起作用，我还注意到出现此错误

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

正如 Omer 指出的那样，menuItems 需要是直接子项，所以我需要使用 forwardRef，现在我一般还没有使用 forwardRef 和 ref，那么在我的情况下我该如何使用它呢？如果您碰巧知道如果 MenuItems 组件使用 redux connect() 它将如何工作，那就太棒了!

Answer 1

在 Material-UI 中使用选择

我们必须送 child :

Material-UI: `children` must be passed when using the `TextField` component with `select`.

在文档中我们可以看到这一点——这意味着我们不能使用外部项目。

解决方案是使用 forwardRef()，但这不是一个好方法。