reactjs - 当父组件在其子组件中注入(inject) props 时，如何在 Typescript 中定义 props？

Question

当一个组件克隆它的子组件来为它们注入(inject) props 时，如何定义子组件的 props 类型？

我收到一个错误，因为 injectedProps 应该在 Child 中

const Parent: React.SFC<ParentProps> = ({ children }) => (
  <div>
    {React.cloneElement(children[0], { injectedProp: 'foo' })}
  </div>
);

const Child: React.SFC<ChildProps> = ({ injectedProp }) => (
  <div attr={injectedProp} />
);

type ChildProps = {
  injectedProp: string;
};

---

<Parent>
  <Child />
</Parent>

Error in Child: injectedProp is missing

Answer 1

此代码模式无法在 TypeScript 中正确输入，如果你问我的话，它很丑陋。相反，考虑传递一个函数，该函数接受注入(inject)的 prop 并创建最终的 child :

interface ParentProps {
  children: (childProps: ChildProps) => React.ReactNode;
}

const Parent: React.SFC<ParentProps> = ({ children }) => (
  <div>
    {children({ injectedProp: 'foo' })}
  </div>
);

const Child: React.SFC<ChildProps> = ({ injectedProp }) => (
  <div title={injectedProp} />
);

type ChildProps = {
  injectedProp: string;
};

function foo() {
  return <Parent>
    {childProps => <Child {...childProps} />}
  </Parent>
}