Определение типа машинописного текста для FunctionComponent и потомков - PullRequest
Новая
       7

Определение типа машинописного текста для FunctionComponent и потомков

0 голосов
/ 31 марта 2020

Я пытаюсь разобраться в машинописи, я довольно новичок в этом и немного теряю синтаксис. Я пытаюсь определить HO C, чтобы обернуть вещи в моих тестах. 

import React, {FunctionComponent, ReactNode} from 'react';
import {ThemeProvider} from "styled-components";
import theme from "../components/Global/theme/theme.style";

const mountWithTheme: FunctionComponent = ({children}: { children?: ReactNode }) => (
    <ThemeProvider theme={theme}>{children}</ThemeProvider>
);

export default mountWithTheme;

Теперь я знаю, что есть тип в React 

type PropsWithChildren<P> = P & { children?: ReactNode };

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

{children}: PropsWithChildren

и 

const mountWithTheme: FunctionComponent<PropsWithChildren> = ({children}) => {...}

, но ни один из этих двух вариантов не работает.

1 Ответ

0 голосов
/ 31 марта 2020

Вы можете определить свой компонент, указав в качестве аргумента тип реквизита: 

import React, {FunctionComponent} from 'react';

type MyProps = {
  color: "red"
}

const mountWithTheme: FunctionComponent<MyProps> = (props) => (
  <div color={props.color}>{props.children}</div>
);

props будет иметь тип PropsWithChildren<MyProps>, но FunctionComponent сделает это за вас.

...