[英]Typescript and React: Type 'Element' is not assignable to type 'FunctionComponent<{}>'
I am converting a react project over to typescript and I'm having an issue.我正在将 React 项目转换为打字稿,但遇到了问题。 The scenario is this: I have a series of
Chapter
components.场景是这样的:我有一系列
Chapter
组件。 Each Chapter
is associated with its own unique data and unique Map
component.每个
Chapter
都与自己独特的数据和独特的Map
组件相关联。 Each Chapter
renders a ChapterTemplate
, and passes the Map
as a prop:每个
Chapter
渲染一个ChapterTemplate
,并将Map
作为道具传递:
// Chapter.tsx
import model from './modal';
import Map from './Map';
type ChapterProps = {
data: ModelSchema;
map: ReactElement;
};
const Chapter: FunctionComponent<ChapterProps> = () => {
return <ChapterTemplate data={model} map={<Map />} />;
};
This is giving me the following ts error at map={<Map />}
:这在
map={<Map />}
给了我以下 ts 错误:
Type 'Element' is not assignable to type 'FunctionComponent<{}>'. Type 'Element' provides no match for the signature '(props: { children?: ReactNode; }, context?: any): ReactElement<any, any>'.
I am not sure how to type this prop based on how I am using it.我不确定如何根据我的使用方式输入这个道具。
For some context, here is what a <Map />
component should look like:对于某些上下文,
<Map />
组件应该如下所示:
type MapProps = {
metadata?: {
name: string;
theme: string;
};
mapState?: {
center: number[];
zoom: number;
basemap: any;
layers: any[];
};
};
const Map = ({
metadata,
mapState: { basemap, layers, zoom, center },
}: MapProps) => {
// ... custom logic here for each chapter ...
}
Ultimately it is the ChapterTemplate
component that organizes the data, manages the state, and passes certain pieces of data to the Map
as props using React.cloneElement
:最终是
ChapterTemplate
组件组织数据,管理状态,并使用React.cloneElement
将某些数据作为道具传递给Map
:
const Chapter = ({
map,
data: { pages, metadata },
}: ChapterProps) => {
const [currentPage, setCurrentPage] = useState(0);
const Map = map;
return (
<Wrapper>
// Some other stuff in here
<MapContainer>
{cloneElement(map as null, {
mapState: pages[currentPage].mapState,
metadata,
})}
</MapContainer>
</Wrapper>
);
};
I read the question How to assign the correct typing to React.cloneElement when giving properties to children?我阅读了问题如何在为子项提供属性时为 React.cloneElement 分配正确的类型? , which is where I got the idea to use
ReactElement
as the type for my map
prop. ,这就是我想到使用
ReactElement
作为我的map
道具类型的地方。 I tried using map as ReactElement<any>
in my cloneElement
call but it was still giving me errors, so I gave up and put in as null
for now.我尝试在我的
cloneElement
调用中使用map as ReactElement<any>
但它仍然给我错误,所以我现在放弃并输入as null
。 But I am still getting this error.但我仍然收到此错误。 For the record, the code does work and compile - react is happy with my syntax and organization.
作为记录,代码确实可以工作和编译 - react 对我的语法和组织很满意。 But is typescript trying to tell me something about the way I'm using a component as a prop?
但是打字稿是否试图告诉我一些关于我使用组件作为道具的方式? Is there a more proper way to do this?
有没有更合适的方法来做到这一点? Thanks for reading.
谢谢阅读。
Check the code here , it's the issue of mismatching type ReactElement
vs FunctionalComponent
检查这里的代码,这是
ReactElement
与FunctionalComponent
类型不匹配的问题
Update:更新:
Hey can you change it to嘿,你能把它改成
const ChapterTemplate = ({
data,
map,
}: { data: any, map: FunctionComponent<MapProps>}) => { // change this to ReactElement
return (<div>Hello world</div>);
}
const Chapter: FunctionComponent<ChapterProps> = (props) => {
return <ChapterTemplate data={props.data} map={Map} />;
};
and then do the <Map />
然后做
<Map />
or do this或者这样做
const ChapterTemplate = ({
data,
map,
}: { data: any, map: ReactElement}) => { // change this to ReactElement
return (<div>Hello world</div>);
}
const Chapter: FunctionComponent<ChapterProps> = (props) => {
return <ChapterTemplate data={props.data} map={<Map />} />;
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.