Question

我在.tsx文件（React typescript）中使用React.memo（）

现在，我将Props的接口声明为：

interface Props {
  type?: string;
}

我的组件看起来像：

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

export default memo(Component);

现在，由于type是可选道具，我打算仅在某些时候使用它。

如果我将组件用作<Component type="something" />，则一切正常。但是，如果我将其用作<Component />，则会收到错误->

键入'{children：string; }'与type没有共同的属性 “ IntrinsicAttributes＆Props”。

这似乎是一个非常荒谬的错误，因为我已经在Code沙箱上尝试了这一点，并且一切正常。关于错误可能是什么的任何想法？

更新

如果我在类似的界面中明确添加道具

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。

React.memo与React中的Typescript

1 个答案: