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

Question

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

• 材质界面 4
• 反应自动完成输入

我正在尝试通过传入 material-ui组件 来使用Componentreact-autocomplete-input 元素上的道具。TextareaAutosize

直接从 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

你只是错过了传递默认道具

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}
  />
))