如何解决这个类型错误:X ‘不可分配给类型’IntrinsicAttributes&Props’

huangapple go评论64阅读模式
英文:

How to solve this type Error: X ' is not assignable to type 'IntrinsicAttributes & Props'

问题

以下是您要翻译的内容:

"Hi everyone I want to implement single sign-on authentication using React, Azure AD and typescript, the problem is I am getting this type error in my render file and don't know how to solve it. Here below is the error and thanks for your advices:

render.tsx:

import React from 'react';
import ReactDOM from 'react-dom/client';
import { App } from './App';
import * as serviceWorkerRegistration from './serviceWorkerRegistration';
import reportWebVitals from './reportWebVitals';
import { Environment } from '../types';
import { PublicClientApplication } from '@azure/msal-browser';

interface PcaProps {
  msalInstance: string;
}

const pca = new PublicClientApplication({
  auth: {
    clientId: '...-...-...-...',
    authority: 'https://login.microsoftonline.com/.......',
    redirectUri: '/',
  }
})

function render() {
  const rootElement = document.getElementById('app-root');
  if (!rootElement) throw an Error('Failed to find the root element');

  const root = ReactDOM.createRoot(rootElement);

  root.render(
    <React.StrictMode>
      <App msalInstance={pca} environment={Environment.Browser} />
    </React.StrictMode>,
  );

  serviceWorkerRegistration.unregister();
  reportWebVitals();
}

export { render };

App.tsx:

import React from 'react';
import { Providers } from './providers';
import { Routing } from './Routing'; 

import type { FC } from 'react';
import type { Environment } from '../types'; 

interface Props {
  environment: Environment;
}

const App: FC<Props> = ({ environment }) => (
  <Providers environment={environment}>
    <Routing />
  </Providers>
);

export { App };

希望这可以帮助您解决问题。如果您有任何其他问题,请随时提出。

英文:

Hi everyone I want to implement single sign-on authentication using React, Azure AD and typescript, the problem is I am getting this type error in my my render file and don't know how to solve it. Here below is the error and thanks for your advices:

Type &#39;{ msalInstance: PublicClientApplication; environment: Environment.Browser; }&#39; is not assignable to type &#39;IntrinsicAttributes &amp; Props&#39;.
  Property &#39;msalInstance&#39; does not exist on type &#39;IntrinsicAttributes &amp; Props&#39;.

render.tsx:

import React from &#39;react&#39;;
import ReactDOM from &#39;react-dom/client&#39;;
import { App } from &#39;./App&#39;;
import * as serviceWorkerRegistration from &#39;./serviceWorkerRegistration&#39;;
import reportWebVitals from &#39;./reportWebVitals&#39;;
import { Environment } from &#39;../types&#39;;
import { PublicClientApplication } from &#39;@azure/msal-browser&#39;;

interface PcaProps {
  msalInstance: string;
}

const pca = new PublicClientApplication({
  auth: {
    clientId: &#39;...-...-...-...&#39;,
    authority: &#39;https://login.microsoftonline.com/.......&#39;,
    redirectUri: &#39;/&#39;,
  }
})

function render() {
  const rootElement = document.getElementById(&#39;app-root&#39;);
  if (!rootElement) throw new Error(&#39;Failed to find the root element&#39;);

  const root = ReactDOM.createRoot(rootElement);

  root.render(
    &lt;React.StrictMode&gt;
      &lt;App msalInstance={pca} environment={Environment.Browser} /&gt;
    &lt;/React.StrictMode&gt;,
  );

  serviceWorkerRegistration.unregister();
  reportWebVitals();
}

export { render };

App.tsx:

import React from &#39;react&#39;;
    import { Providers } from &#39;./providers&#39;;
    import { Routing } from &#39;./Routing&#39;; 
    
    import type { FC } from &#39;react&#39;;
    import type { Environment } from &#39;../types&#39;; 
    
    interface Props {
      environment: Environment;
    }
    
    const App: FC&lt;Props&gt; = ({ environment }) =&gt; (
      &lt;Providers environment={environment}&gt;
        &lt;Routing /&gt;
      &lt;/Providers&gt;
    );
    
    export { App };

答案1

得分: 2

你的Props中不缺少一个msalInstance: PublicClientApplication吗?

接口 Props {
  环境:环境;
  msalInstance : PublicClientApplication;
}

const App: FC<Props> = ({ environment, msalInstance }: Props) => ( ...)
英文:

don't you miss a msalInstance : PublicClientApplication; in your Props ?

interface Props {
  environment: Environment;
  msalInstance : PublicClientApplication;
}

const App: FC&lt;Props&gt; = ({ environment, msalInstance }: Props) =&gt; ( ...)

huangapple
  • 本文由 发表于 2023年2月10日 16:33:33
  • 转载请务必保留本文链接:https://go.coder-hub.com/75408626.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定