Как правильно перенаправить ссылку на компонент material-ui из функционального компонента

Question

Я использую следующие пакеты для создания решения автозаполнения для приложения, над которым я работаю:

• Материал UI 4
• реагировать-автозаполнение-ввод

Я пытаюсь использовать Component prop в элементе response-autocomplete-input, передав материал-ui TextareaAutosize составная часть.

Непосредственный переход в TextareaAutosize из MUI

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