"Тип '{children: Element []; pictureUrl: string;}' не может быть назначен типу 'IntrinsicAttributes & {children ?: ReactNode;}' - PullRequest
0 голосов
/ 09 мая 2020

У меня проблемы с Typescript и появляется следующее сообщение:

{children: Element []; pictureUrl: строка; } 'нельзя присвоить типу' IntrinsicAttributes & {children ?: ReactNode; } '

Свойство' pictureUrl 'не существует для типа' IntrinsicAttributes & {children ?: ReactNode; } '

Я действительно не понимаю, что я сделал не так, кто-то видит проблему?

Это мой компонент приложения:

import React from 'react';
import { Root, Routes, addPrefetchExcludes } from 'react-static';
import { Link, Router } from '@reach/router';
import FancyDiv from 'components/FancyDiv';
import Dynamic from 'containers/Dynamic';
import './app.css';
import NavDomicile from './components/NavDomicile';

// Any routes that start with 'dynamic' will be treated as non-static routes
addPrefetchExcludes([ 'dynamic' ]);

function App() {
	return (
		<Root>
			<NavDomicile pictureUrl="./assets/logo-lavigo-domicile.png">
				<Link to="/">Home</Link>
				<Link to="/about">About</Link>
				<Link to="/blog">Blog</Link>
				<Link to="/dynamic">Dynamic</Link>
			</NavDomicile>
			<div className="content">
				<FancyDiv>
					<React.Suspense fallback={<em>Loading...</em>}>
						<Router>
							<Dynamic path="dynamic" />
							<Routes path="*" />
						</Router>
					</React.Suspense>
				</FancyDiv>
			</div>
		</Root>
	);
}

export default App;

And My Nav Component : 

<!-- begin snippet: js hide: false console: true babel: false -->
import React, { ReactNode } from 'react';

interface INavProps {
	pictureUrl?: string;
	children?: ReactNode;
}

const NavDomicile: React.FC = ({ children, pictureUrl }: INavProps) => {
	return (
		<nav>
			<div>
				<img src={pictureUrl} />
			</div>
			<div>{children}</div>
		</nav>
	);
};
export default NavDomicile;

1 Ответ

1 голос
/ 09 мая 2020

Вы должны предоставить интерфейс для типов React.FC

const NavDomicile: React.FC<INavProps> = ({ children, pictureUrl }) => {


}
...