当组件克隆其子级以向其注入道具时,如何定义子级道具类型?
我收到一个错误原因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>

子项中缺少错误:injectedProp

最佳答案

这个代码模式不能在typescript中正确键入,如果你问我的话,它很难看。相反,请考虑传递一个函数,该函数接受注入的道具并创建最终的子对象:

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>
}

10-06 15:05