Reactjs 尝试在单独的组件中选择菜单项-如何解决'；不能为功能组件提供参考'；错误？

我正在尝试将选择字段中的菜单项移动到一个单独的组件，因为我必须使用同一个菜单项两次，所以将它们移动到单独的组件似乎是最好的方法。但它不像我期望的那样工作

这很好（因为它在同一个组件中）：

{
console.log（“本地运行”）；
setLocalValue（例如target.value）；
}}
样式={{width:“100%”}
value={localValue}
>
菜单项1
菜单项2
菜单项3

这不是（因为它是一个单独的组件）：

{
控制台日志（“外部运行”）；
setExternalValue（如目标值）；
}}
样式={{width:“100%”}
值={externalValue}
>

和菜单项返回：

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

菜单项1
菜单项2
菜单项3

我做了一个密码笔

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

无法为功能组件提供引用。尝试访问此ref将失败。您是想使用React.forwardRef（）吗

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

在材质界面中使用“选择为” 我们必须让儿童：

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

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

---

解决方法是使用forwardRef（），但这不是一个好的方法。

啊，我不知道，我想它在我的代码中会有点难看：/，谢谢，经过更多的考虑并尝试使其工作，我显然需要使用forwardRef，因为我还试图让自定义滚动条正常工作，在这种情况下，我将如何使用forwardRef？

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

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