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

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

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:

  1. import React from 'react';
  2. import ReactDOM from 'react-dom/client';
  3. import { App } from './App';
  4. import * as serviceWorkerRegistration from './serviceWorkerRegistration';
  5. import reportWebVitals from './reportWebVitals';
  6. import { Environment } from '../types';
  7. import { PublicClientApplication } from '@azure/msal-browser';
  9. interface PcaProps {
  10.   msalInstance: string;
  11. }
  13. const pca = new PublicClientApplication({
  14.   auth: {
  15.     clientId: '...-...-...-...',
  16.     authority: 'https://login.microsoftonline.com/.......',
  17.     redirectUri: '/',
  18.   }
  19. })
  21. function render() {
  22.   const rootElement = document.getElementById('app-root');
  23.   if (!rootElement) throw an Error('Failed to find the root element');
  25.   const root = ReactDOM.createRoot(rootElement);
  27.   root.render(
  28.     <React.StrictMode>
  29.       <App msalInstance={pca} environment={Environment.Browser} />
  30.     </React.StrictMode>,
  31.   );
  33.   serviceWorkerRegistration.unregister();
  34.   reportWebVitals();
  35. }
  37. export { render };

App.tsx:

  1. import React from 'react';
  2. import { Providers } from './providers';
  3. import { Routing } from './Routing'; 
  5. import type { FC } from 'react';
  6. import type { Environment } from '../types'; 
  8. interface Props {
  9.   environment: Environment;
  10. }
  12. const App: FC<Props> = ({ environment }) => (
  13.   <Providers environment={environment}>
  14.     <Routing />
  15.   </Providers>
  16. );
  18. 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:

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

render.tsx:

  1. import React from &#39;react&#39;;
  2. import ReactDOM from &#39;react-dom/client&#39;;
  3. import { App } from &#39;./App&#39;;
  4. import * as serviceWorkerRegistration from &#39;./serviceWorkerRegistration&#39;;
  5. import reportWebVitals from &#39;./reportWebVitals&#39;;
  6. import { Environment } from &#39;../types&#39;;
  7. import { PublicClientApplication } from &#39;@azure/msal-browser&#39;;
  9. interface PcaProps {
  10.   msalInstance: string;
  11. }
  13. const pca = new PublicClientApplication({
  14.   auth: {
  15.     clientId: &#39;...-...-...-...&#39;,
  16.     authority: &#39;https://login.microsoftonline.com/.......&#39;,
  17.     redirectUri: &#39;/&#39;,
  18.   }
  19. })
  21. function render() {
  22.   const rootElement = document.getElementById(&#39;app-root&#39;);
  23.   if (!rootElement) throw new Error(&#39;Failed to find the root element&#39;);
  25.   const root = ReactDOM.createRoot(rootElement);
  27.   root.render(
  28.     &lt;React.StrictMode&gt;
  29.       &lt;App msalInstance={pca} environment={Environment.Browser} /&gt;
  30.     &lt;/React.StrictMode&gt;,
  31.   );
  33.   serviceWorkerRegistration.unregister();
  34.   reportWebVitals();
  35. }
  37. export { render };

App.tsx:

  1. import React from &#39;react&#39;;
  2.     import { Providers } from &#39;./providers&#39;;
  3.     import { Routing } from &#39;./Routing&#39;; 
  4.     
  5.     import type { FC } from &#39;react&#39;;
  6.     import type { Environment } from &#39;../types&#39;; 
  7.     
  8.     interface Props {
  9.       environment: Environment;
  10.     }
  11.     
  12.     const App: FC&lt;Props&gt; = ({ environment }) =&gt; (
  13.       &lt;Providers environment={environment}&gt;
  14.         &lt;Routing /&gt;
  15.       &lt;/Providers&gt;
  16.     );
  17.     
  18.     export { App };

答案1

得分: 2

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

  1. 接口 Props {
  2.   环境：环境;
  3.   msalInstance : PublicClientApplication;
  4. }
  6. const App: FC<Props> = ({ environment, msalInstance }: Props) => ( ...)
英文:

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

  1. interface Props {
  2.   environment: Environment;
  3.   msalInstance : PublicClientApplication;
  4. }
  6. const App: FC&lt;Props&gt; = ({ environment, msalInstance }: Props) =&gt; ( ...)

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

发表评论

匿名网友

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

确定