Как определить реквизиты в Typescript, когда родительский компонент внедряет реквизиты в своих потомках?

Question

Когда компонент клонирует своих дочерних элементов, чтобы ввести в них реквизит, как определить тип дочерних реквизитов?

Я получаю сообщение об ошибке, причина 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 отсутствует

Answer 1

Этот шаблон кода не может быть правильно набран в 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>
}