最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Argument of type x is not assignable to parameter of type 'ForwardRefRenderFunction<unknown, PropsWi

programmeradmin1浏览0评论

I try to update an old react component with typescript and Mui :

But I get

 error TS2345: Argument of type '(props: WithoutTheme<P>, ref: any) => Element' is not assignable to parameter of type 'ForwardRefRenderFunction<unknown, PropsWithoutRef<P>>'.
  Types of parameters 'props' and 'props' are incompatible.
    Type 'PropsWithoutRef<P>' is not assignable to type 'WithoutTheme<P>'.
      Type '{ theme?: Theme | undefined; }' is not assignable to type 'WithoutTheme<P>'.

   return forwardRef(function ComponentWithTheme(

on

import type { Theme } from "@mui/material/styles";
import { useTheme } from "@mui/material/styles";
import type { ComponentType } from "react";
import React, { forwardRef } from "react";

type WithoutTheme<P> = Omit<P, "theme">;

function withTheme<P extends { theme?: Theme }>(Component: ComponentType<P>) {
  return forwardRef(function ComponentWithTheme(
    props: WithoutTheme<P>,
    ref: any,
  ) {
    const theme = useTheme();
    const combinedProps = { ...props, theme } as P;

    return <Component ref={ref} {..binedProps} />;
  });
}

export { withTheme };

I am new to typescript so fixing tsc issue is hard :s

Thanks

I try to update an old react component with typescript and Mui : https://github.com/Yuvaleros/material-ui-dropzone

But I get

 error TS2345: Argument of type '(props: WithoutTheme<P>, ref: any) => Element' is not assignable to parameter of type 'ForwardRefRenderFunction<unknown, PropsWithoutRef<P>>'.
  Types of parameters 'props' and 'props' are incompatible.
    Type 'PropsWithoutRef<P>' is not assignable to type 'WithoutTheme<P>'.
      Type '{ theme?: Theme | undefined; }' is not assignable to type 'WithoutTheme<P>'.

   return forwardRef(function ComponentWithTheme(

on

import type { Theme } from "@mui/material/styles";
import { useTheme } from "@mui/material/styles";
import type { ComponentType } from "react";
import React, { forwardRef } from "react";

type WithoutTheme<P> = Omit<P, "theme">;

function withTheme<P extends { theme?: Theme }>(Component: ComponentType<P>) {
  return forwardRef(function ComponentWithTheme(
    props: WithoutTheme<P>,
    ref: any,
  ) {
    const theme = useTheme();
    const combinedProps = { ...props, theme } as P;

    return <Component ref={ref} {...combinedProps} />;
  });
}

export { withTheme };

I am new to typescript so fixing tsc issue is hard :s

Thanks

Share Improve this question asked Feb 7 at 11:47 VanaVana 9334 gold badges15 silver badges24 bronze badges
Add a comment  | 

1 Answer 1

Reset to default 0

It seems like type mismatch between WithoutTheme<P> and PropsWithoutRef<P>

PropsWithoutRef<P> (which is implicitly required by forwardRef) expects P to be used as is, but you're modifying it with Omit<P, "theme">,This is causing issue here. to fix this

function withTheme<P extends { theme?: Theme }, R>(
  Component: ComponentType<P & React.RefAttributes<R>>
) {
  return forwardRef<unknown, WithoutTheme<P>>(function ComponentWithTheme(
    props,
    ref
  ) {
    const theme = useTheme();
     const combinedProps = { ...props, theme } as unknown as P;

    return <Component ref={ref} {...combinedProps} />;
  });
}


wrapped component receives correctly typed ref (R) and forwardRef properly infers both props and ref

与本文相关的文章

发布评论

评论列表(0)

  1. 暂无评论