React.memo 与打字稿反应

Question

我在 .tsx 文件中使用 React.memo()（React 打字稿）

现在我已经为 Props 声明了一个接口：

interface Props {
  type?: string;
}

我的组件看起来像：

const Component: React.SFC<Props> = props => {
  /// return something;
};

export default memo(Component);

现在由于 type 是一个可选的属性，我打算只偶尔使用它。

如果我将我的组件用作<Component type="something" />，一切都会好起来的。 但是如果我将它用作<Component /> 我会得到错误-->

类型'{孩子：字符串; }' 与 type 没有共同的属性 '内在属性和道具'。

这似乎是一个非常荒谬的错误，因为我在代码沙箱上尝试过，一切正常。关于错误可能是什么的任何想法？

更新

如果我在界面中明确添加一个道具

interface Props {
  type?: string;
  children?: ReactNode;
}

那么在这种情况下一切正常。这应该是隐含的，但要根据错误将其视为

'{ 孩子：字符串； }'

有什么想法吗？？？

Answer 1

我认为输入有误。改变

function memo<P extends object>(
  Component: SFC<P>,
  propsAreEqual?: (
    prevProps: Readonly<PropsWithChildren<P>>,
    nextProps: Readonly<PropsWithChildren<P>>
  ) => boolean
): NamedExoticComponent<P>;

到

function memo<P extends object>(
  Component: SFC<P>,
  propsAreEqual?: (
    prevProps: Readonly<PropsWithChildren<P>>,
    nextProps: Readonly<PropsWithChildren<P>>
  ) => boolean
): NamedExoticComponent<PropsWithChildren<P>>;

解决问题

更新

嗯，实际上这不是一个错误。见discussion。

TLTR：您必须在组件道具类型中指定children。

type MyComponentProps {
  children: React.ReactNode;
}

Read more