TypeScript 中的 useContext 提供程序

Question

我正在开发一个有 Context 的项目，但在尝试使用 Provider:

时出现此错误

Type '{ children: Element[]; }' is not assignable to type 'IntrinsicAttributes & ReactNode'.
  Type '{ children: Element[]; }' is missing the following properties from type 'ReactPortal': key, type, props

Mainpage.tsx

import { Form } from "../../components/Form";
import { Greet } from "../../components/Greet";

import { UserProvider } from "../../context/UserContext";

const Mainpage: React.FC = () => {

    return(
        <div>
            <UserProvider> // **ERROR HERE !!!**
                <>
                <Greet />
                <Form />
                </>
            </UserProvider>
        </div>
    )
}
export default Mainpage;

UserContext.tsx

import React, { Component, createContext, ReactChild, ReactNode, useState } from "react";

type ContextType={
    name?:string,
    email?:string,
    submit?: (param?:any, param2?:any)=> void
}

export const UserContext = createContext<ContextType | null> (null);

export const UserProvider: React.FC<React.ReactNode> = (children) => {
    const [name, setName] = useState('')
    const [email, setEmail] = useState('')

    const onSubmit = (name:string, email:string ) => {

        console.log('Submit App: ' + name, email)
        setName(name)
        setEmail(email)
    }

    return(
        <UserContext.Provider value={{name, email, submit: onSubmit}}>
            {children}
        </UserContext.Provider>

    )
}

Answer 1

通过显式设置 React.ReactNode 作为您的组件道具，您表示只有一个节点作为子节点，而当前您有 2 个节点作为子节点。

改变这个：

export const UserProvider: React.FC<React.ReactNode> = () => {...}

为此：

export const UserProvider: React.FC = () => {...}

另一种选择是将 children 包装在 React 片段中，如下所示：

<UserProvider> // **ERROR HERE !!!**
  <>
    <Greet />
    <Form />
  </>
</UserProvider>

Answer 2

UserProvider 被定义为一个 React 组件并且只接受一个 children UserProvider: React.FC<React.ReactNode>

您可以将 <Greet /> 和 <Form/> 包裹在片段中

<>
  <Greet/>
  <Form/>
</>

....
const Mainpage: React.FC = () => {

    return(
        <div>
            <UserProvider> // **ERROR HERE !!!**
              <>
                <Greet/>
                <Form/>
              </>
            </UserProvider>
        </div>
    )
}
export default Mainpage;

更新:

问题就在这里

....
export const UserProvider: React.FC = (children) => { // << look at children
....

children 是一个道具，应该被解构 ({ children }) 或从 props.children 使用 children.children

...
export const UserProvider: React.FC = ({ children }) => {
...

TypeScript 中的 useContext 提供程序

useContext Provider in TypeScript

javascript

typescript

reactjs

react-hooks