英文:
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 '{ msalInstance: PublicClientApplication; environment: Environment.Browser; }' is not assignable to type 'IntrinsicAttributes & Props'.
Property 'msalInstance' does not exist on type 'IntrinsicAttributes & Props'.
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 new 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 };
答案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<Props> = ({ environment, msalInstance }: Props) => ( ...)
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论