TypeScript: как правильно ввести дополнительную опору, когда мы используем React.cloneElement - PullRequest
1 голос
/ 06 мая 2020
const Test: React.FC = () => (
  <Parent>
    <Child />
  </Parent>
);

const Parent: React.FC = ({ children }) => {
  const onClose = () => {
    console.log('onClose');
  };

  return (
    <div>
      {React.Children.map(children, child => {
        if (React.isValidElement(child)) {
          return React.cloneElement(child, { ...child.props, onClose });
        }
      })}
    </div>
  );
};

const Child: React.FC<{ onClose: () => void }> = props => {
  return <div />;
};

Есть очевидная ошибка:

TS2741: Property 'onClose' is missing in type '{}' but required in type '{ onClose: () => void; }'

TypeScript требует добавить свойство onClose к <Child/>. Родительский компонент передает свойство, используя React.cloneElement.

Можно ли решить проблему без использования «рендеринга»? Как мы можем набрать const Parent: React.FC<>?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...