[英]Type '{ children: Element; }' has no properties in common with type 'IntrinsicAttributes' - React 18.2.0
I have a question.我有个问题。 I am currently learning react with Typescript using the - fullstack react with typescript textbook.我目前正在学习使用 Typescript 与 typescript 教科书进行全栈反应。 I am now on the first app - the trello clone.我现在使用第一个应用程序 - trello 克隆。
I hit a bug I am finding difficult to resolve.我遇到了一个我发现很难解决的错误。
I get this error from the AppStateContext.我从 AppStateContext 得到这个错误。
Type '{ children: Element; }' has no properties in common with type 'IntrinsicAttributes'
This is the block where it is defined: AppStateContext.tsx这是定义它的块:AppStateContext.tsx
export const AppStateProvider: FC = ({ children }: React.PropsWithChildren<{}>) => {
const [state, dispatch] = useImmerReducer(appStateReducer, appData)
const { lists } = state
const getTasksByListId = (id: string) => {
return lists.find((list) => list.id === id)?.tasks || []
}
return (
<AppStateContext.Provider value={{ lists, getTasksByListId, dispatch }}>
{children}
</AppStateContext.Provider>
)
}
This is the block where it is called: index.tsx这是它被调用的块:index.tsx
const root = ReactDOM.createRoot(
document.getElementById('root') as HTMLElement
);
root.render(
<AppStateProvider>
<App />
</AppStateProvider>
);
The error is coming from where I call the in the index.tsx file.错误来自我在 index.tsx 文件中调用的位置。
I really appreciate the help in advance.我非常感谢您提前提供的帮助。 React version is 18.2.0反应版本是 18.2.0
The error is basically telling you that the type of children (which is ELements) has no overlap with your typescript defined type (React.PropsWithChildren<{}>).该错误基本上是在告诉您子项的类型(即 ELements)与您的 typescript 定义的类型(React.PropsWithChildren<{}>)没有重叠。 The easy way to fix the issue is to change the AppStateContext.tsx to something like this:解决此问题的简单方法是将 AppStateContext.tsx 更改为以下内容:
export const AppStateProvider: FC = ({ children }: {children:Elements) => {
...
However, if you really want to practice the clean code, and use React.PropsWithChildren, here is a repository with a sample use case: https://github.com/KishorNaik/Sol_PropsWithChildren_React但是,如果您真的想练习干净的代码并使用 React.PropsWithChildren,这里有一个带有示例用例的存储库: https://github.com/KishorNaik/Sol_PropsWithChildren_React
HTH高温高压
You need to get rid of explicit FC
type for AppStateProvider
.您需要摆脱AppStateProvider
的显式FC
类型。
See this simplified example:请参阅此简化示例:
interface FunctionComponent<P = {}> {
(props: P, context?: any): ReactElement<any, any> | null;
}
As you might have noticed, FunctionComponent
is a simplified version (removed props which are not related to your question) of FC
.您可能已经注意到, FunctionComponent
是FC
的简化版本(删除了与您的问题无关的道具)。
Generic P
represents props
argument.通用P
代表props
参数。 If P
generic don't have children
property, you are not allowed to use it.如果P
generic 没有children
属性,则不允许使用它。 In fact you are allowed to use only that properties which are declared in P
generic.事实上,您只能使用在P
泛型中声明的属性。
Please keep in mind, that you have used just FC
, it means that P
generic is replaced with {}
.请记住,您只使用了FC
,这意味着P
generic 被替换为{}
。 Hence, you are not allowed to provide any property to react component.因此,您不能提供任何属性来反应组件。
See this:看到这个:
type Fn<P = 'no properties'> = (props: P) => void
const fn: Fn = (props) => {
props // no properties
}
props
has 'no properties'
type, and you are not allowed to override this with another type: props
有'no properties'
类型,你不能用另一种类型覆盖它:
// errpr
const fn: Fn = (props:number) => {
props // no properties
}
YOur example is a bit different, because typescript type {}
is a tricky type. Y我们的例子有点不同,因为 typescript 类型{}
是一个棘手的类型。 Since everything in javascript is object, any (not sure for 100%) type is assignable to {}
.由于 javascript 中的所有内容都是 object,因此任何(不确定 100%)类型都可以分配给{}
。 This is why you don't have an error using React.PropsWithChildren<{}>
for props.这就是为什么使用React.PropsWithChildren<{}>
处理道具不会出错的原因。 However, using React.PropsWithChildren<{}>
does not affect AppStateProvider
type, because when you call it, it will expect only {}
as a properties.但是,使用React.PropsWithChildren<{}>
不会影响AppStateProvider
类型,因为当您调用它时,它只会期望{}
作为属性。
Just as a rule of thumb, you are allowed to use either explicit type of whole function and avoid using argument type or just use type for argument.根据经验,您可以使用整个 function 的显式类型并避免使用参数类型或仅使用类型作为参数。
Either this:要么:
type Fn<P = 'no properties'> = (props: P) => void
const fn: Fn = (props) => {
props // no properties
}
OR或者
const fn = (props:'no properties') => {
props // no properties
}
PS In react 17.*, FC
had children type
, see this article PS 在 react 17.* 中, FC
有children type
,见这篇文章
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.