Typescript : 输入 React 中包装组件传递的 props

Question

我有一个包装组件 A，它可以像这样向子组件添加道具

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})
     </>
   )
};

现在我想将它与需要像这样的 someState:string 道具的组件 X 一起使用

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

但是 Typescript 抱怨 X 没有提供所需的 someState 属性； 我如何让他知道组件 A 能够将 someState 道具传递给它的孩子？

Answer 1

只需将 prop 声明为可选：

    interface XProps {
        someState?: string;
    }

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

编辑

也许更好的方法是 HOC（高阶组件），不需要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" />