如何正确地将 ref 从功能组件转发到 material-ui 组件

Question

我正在使用以下包为我正在处理的应用程序创建自动完成解决方案：

我试图通过传入 material-ui TextareaAutosize 组件在 react-autocomplete-input 元素上使用 Component 道具。

直接从MUI传入TextareaAutosize

import {TextareaAutosize} from '@material-ui/core';
<AutocompleteInput Component={TextareaAutosize} />

这行得通，但是我无法控制它获得的道具。

通过自定义组件所以我可以添加道具

const CustomTextarea = forwardRef((props, ref) => (
  // If I don't forward the ref I get an error...
  <TextareaAutosize
    placeholder="Material-ui through custom component..."
    ref={ref}
  />
));

<AutocompleteInput Component={CustomTextarea} />

这将完全停止自动完成功能。但是，占位符仍然正确显示，这意味着道具至少可以通过。

您可以在下面的沙箱中看到所有示例。

示例： https://codesandbox.io/s/frosty-wildflower-48iyd

Answer 1

您刚刚错过了默认 props

const CustomTextarea = forwardRef((props, ref) => (
  // If I don't forward the ref I get an error...
  <TextareaAutosize
    placeholder="Material-ui through custom component..."
    {...props} // here
    ref={ref}
  />
))

如何正确地将 ref 从功能组件转发到 material-ui 组件

How to properly forward a ref to a material-ui component from a functional component

javascript

reactjs

material-ui

react-forwardref