withStyles（）返回的组件是什么类型？

Question

我有一个Dictionary组件，具有非常简单的属性：

interface DictionaryProps {
  word: string;
}

在另一个组件的道具中，我要求一个通用组件，该组件只需要一个字符串词：

dictionary: React.ComponentClass<{ word: string }>;

它的父母这样使用它：

<UsesDictionary dictionary={Dictionary} />

---

现在，我想尝试使用JSS（在整个项目中已经使用了MaterialUI，因此，不，整个库只用于单个组件）。我创建了一些样式，并相应地更新了DictionaryProps：

const styles = createStyles({ root: { position: 'relative' } });

interface DictionaryProps extends WithStyles<typeof styles>{
  word: string;
}

class Dictionary extends React.Component<DictionaryProps> {}

export default withStyles(styles)(Dictionary);

将样式Dictionary传递给React.ComponentClass接受UsesDictionary时，会产生以下编译错误：

Types of property 'dictionary' are incompatible.
  Type 'ComponentType<Overwrite<DictionaryProps, StyledComponentProps<"root">>>' is not assignable to type 'ComponentClass<{ word: string; }> & ComponentClass<{ word: string; }>'.
    Type 'StatelessComponent<Overwrite<DictionaryProps, StyledComponentProps<"root">>>' is not assignable to type 'ComponentClass<{ word: string; }> & ComponentClass<{ word: string; }>'.
      Type 'StatelessComponent<Overwrite<DictionaryProps, StyledComponentProps<"root">>>' is not assignable to type 'ComponentClass<{ word: string; }>'.

我通过直接使用Dictionary确认与React.ComponentClass<{ word: string }>相匹配：

<Dictionary word={dictionarySearch} />

这表明我并没有以某种方式弄乱Dictionary的属性。

---

1. 我可以使用any而不是具体类型，但是我为此项目设置了一个规则，不要使用any。无论如何，这是一个坏习惯，因为它会失去类型安全性。

2. 我直接尝试使用错误中的类型-StatelessComponent<Overwrite<DictionaryProps, StyledComponentProps<"root">>>。 但是：

   • 它有一些Overwrite类型，我不知道，也没有找到它的位置。我想它是来自MaterialUI，并且我不想链接UsesDictionary。
   • 它需要样式 DictionaryProps，而不仅仅是{word: string}部分。而且我不想将我的UsesDictionary耦合到任何具体的字典类型，所以我不想让它知道字典是否使用withStyles。

   即使用错误中的类型不是可行的选择。

遇到withStyles问题的其他人将其用作装饰器，因此会出错。这里并不适用，因为我已经习惯使用withStyles作为普通函数。

---

简而言之：

我应该如何键入dictionary的{​​{1}}属性，以使其接受UsesDictionary版的组件？

Answer 1

我最初删除我的问题是因为发布时我遇到了一个愚蠢的错误，导致解决方案波纹管出现错误，甚至在询问之前我都曾尝试过。我认为这可能对其他人有帮助，因此我决定取消删除问题并将解决方案作为答案发布。

一种可行的解决方案是联合当前类型及其功能组件。

readonly dictionary:
  | React.ComponentClass<{ word: string }>
  | React.StatelessComponent<{ word: string }>;

我有想法在查看错误消息时尝试此操作。我注意到它正在尝试为我的ComponentClass分配一个StatelessComponent。