排版组件

Question

根据此处的材料ui文档：https://material-ui.com/components/typography/

我应该能够像下面这样使用排版组件：

<Typography variant="h1" component="h1">
  Hello World
</Typography>

然而，由于更新到了nextjs 9，我得到了这样的输入错误：

Type 'string' is not assignable to type 'ElementType<HTMLAttributes<HTMLElement>>'

用于零部件特性。我已经尝试过多次更新类型依赖项，但似乎没有任何帮助。

多亏了沙农的建议，错误现在已经转移到：

48:36 Type '"h1"' is not assignable to type 'ElementType<HTMLAttributes<HTMLElement>>'.
    46 |         </Grid>
    47 |         <Grid item>
  > 48 |           <Typography variant="h1" component={'h1' as const}>
       |                                    ^
    49 |             Hello World
    50 |           </Typography>
    51 |         </Grid>

这对我来说仍然是个拦路虎。

考虑到我给出的第一个例子与文档完全匹配，我对如何进行这个主题感到困惑。

Answer 1

ComponentType是React的未初始化形式的功能组件/类组件的类型。

也就是说，为了满足需要"React.ComponentType“的东西，你可以简单地这样做……

const test: React.ComponentType<{name: string}> = ({name})  => <div>I AM DIV</div>;
const test1: React.ComponentType<{name: string}> = class extends React.Component<{name: string}> { render() {return <div>I AM DIV TO</div>}};

Answer 2

就隐藏打字错误而言，使用component={'div' as any}对我很有效。