MUI Autocomplete Typescript：PaperComponents 函数参数的类型是什么

Question

MUI 的自动完成有一个属性 PaperCompomponent 允许你传递你自己的反应组件。属性是一个以 properties 作为参数的函数，可用于将其传递给您的组件。

在 Typescript 中，我想输入 properties 参数。有谁知道确切的类型？它不是可以从 MUI 本身导入的 PaperProps。自动完成正在使用 React.JSXElementConstructor<React.HTMLAttributes<HTMLElement>>;，这似乎是正确的，但是当访问 children 时，我收到一个打字稿错误，指出 properties.children 在这种类型中不存在。

这是一个非常简单的示例，可以让您了解我的意思。

Autocompleter.tsx

 <Autocomplete
   id='autocompleter'
   PaperComponent={ (properties) => <Component properties={ properties } /> }
 />

Component.tsx

interface ComponentProps {
 properties: ???;
}

const Component: FunctionComponent<ComponentProps> = ({ properties }): ReactElement => (
 <Container onMouseDown={ properties.children[2].props.onMouseDown }>
   <div {...properties}>
   <div> Some Content</div>
 </Container>
))

Answer 1

您可以创建添加子属性：

interface ComponentProps {
  // Obtained from the source code
  properties: React.JSXElementConstructor<React.HTMLAttributes<HTMLElement>>;

  // Additional prop
  children: React.ReactNode;
}

const Component: FunctionComponent<ComponentProps> = ({ properties, children }): ReactElement => (
  <Container onMouseDown={ properties.children[2].props.onMouseDown }>
    <div {...properties}>
    <div> Some Content</div>
  </Container>
))

您不必通过 properties 访问 children 道具，它可以是您组件中的另一个道具。

MUI Autocomplete Typescript：PaperComponents 函数参数的类型是什么

MUI Autocomplete Typescript: What is the type of PaperComponents function parameter

javascript

typescript

reactjs

material-ui