Typescipt：在 React 中键入包装器组件传递的道具

Question

I have a wrapper component A which is able to add props to children like this

interface AProps {
   fooProp: string
}

const A : FunctionComponent<AProps> = (props)=>{
   const [someState, setSomeState] = useState("");//local state i want to pass to children
   const {children} = props;

   //...some other code setting someState

   // type guard making the compiler happy
   if (!React.isValidElement(children){
      return <></>
   }

   return (
     <>
         React.cloneElement(React.Children.only(children, {someState})
     </>
   )
};

Now i want to use it with a component X which needs a someState:string prop like this

<A fooProp="foobar">
   <X/>
</A

But Typescript is complaining that X is not provided with required someState prop; How do i make him aware that component A is able to pass the someState prop to its children?

Answer 1

Just declare the prop as optional:

    interface XProps {
        someState?: string;
    }

    class X extends React.Component<XProps> { ... }

EDIT

Maybe a better approach is HOC (High Order Component), with no need for React.cloneElement

interface AProps {
   fooProp: string
}
interface XProps {
   someState: string;
}

function withSomeState(X: React.Component<XProps>) {
    const A: FunctionComponent<AProps> = (props) => {
       const [someState, setSomeState] = useState("");//local state i want to pass to children

       //...some other code setting someState

       // type guard making the compiler happy
       if (!React.isValidElement(X){
          return <></>
       }

       return (
         <X {someState} />
       );
    }
    return A;
}

const A = withSomeState(X);

<A fooProp="foobar" />