renderProps和TypeScript-有解無憂

我正在嘗試將我的 React 專案轉換為 TypeScript 并且卡在這個登錄組件上。我正在使用 react-google-login，在使用 renderProps 時出現以下錯誤：

  Overload 1 of 2, '(props: { component: ElementType<any>; } & { children?: ReactNode; classes?: Partial<SvgIconClasses> | undefined; color?: "error" | "inherit" | ... 7 more ... | undefined; ... 5 more ...; viewBox?: string | undefined; } & CommonProps & Omit<...>): Element', gave the following error.
    Property 'component' is missing in type '{ onClick: () => void; disabled: boolean | undefined; }' but required in type '{ component: ElementType<any>; }'.
  Overload 2 of 2, '(props: DefaultComponentProps<SvgIconTypeMap<{}, "svg">>): Element', gave the following error.
    Type '{ onClick: () => void; disabled: boolean | undefined; }' is not assignable to type 'IntrinsicAttributes & { children?: ReactNode; classes?: Partial<SvgIconClasses> | undefined; color?: "error" | "inherit" | ... 7 more ... | undefined; ... 5 more ...; viewBox?: string | undefined; } & CommonProps & Omit<...>'.
      Property 'disabled' does not exist on type 'IntrinsicAttributes & { children?: ReactNode; classes?: Partial<SvgIconClasses> | undefined; color?: "error" | "inherit" | ... 7 more ... | undefined; ... 5 more ...; viewBox?: string | undefined; } & CommonProps & Omit<...>'.ts(2769)

這是組件的其余部分：

import React from 'react';
import { GoogleLogin } from 'react-google-login';
import { Grid } from '@material-ui/core'
import GoogleIcon from '@mui/icons-material/Google';

interface Props {
  login: (response: {}) => void;
}

const Login: React.FC<Props> = ({ login }) => {

  const responseGoogle = (response: {}) => {
    login(response)
  }

  return (
    <div>
      <Grid container justifyContent="center">
        <GoogleLogin 
          clientId='8013933409-b2i0rd6n1i5i67hen1k874pqdjr4oj4r.apps.googleusercontent.com'
          render={renderProps => (
            <GoogleIcon onClick={renderProps.onClick} disabled={renderProps.disabled}/>
          )}
          onSuccess={responseGoogle}
          onFailure={responseGoogle}
          cookiePolicy={'single_host_origin'}
        /> 
      </Grid>
    </div>
  );
};
  
export default Login;

關于如何解決這個問題的任何想法？在此先感謝您的幫助！

uj5u.com熱心網友回復：

您正在svg組件上傳遞按鈕道具，將 GoogleIcon svg 組件替換為來自 MUI 的 IconButton 之類的按鈕

import IconButton from '@mui/material/IconButton';
import GoogleIcon from '@mui/icons-material/Google';

    ...
    
          render={renderProps => (
              <IconButton onClick={renderProps.onClick} disabled={renderProps.disabled}>
                <GoogleIcon />
              </IconButton>
          )}
    
    ...

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/403079.html

標籤：

上一篇：在不同的位置等待產生不同的結果

下一篇：等待方法完成