Блог

Главная - Вопросы по программированию - React typescript правильный способ ввода функционального компонента

React typescript правильный способ ввода функционального компонента

#reactjs #typescript

#reactjs #typescript

Вопрос:

Я совсем новичок в react и typescript. Правильный ли это способ ввода функционального компонента?

 type ModalProps = {
  children: ReactElement<any>;
  show: boolean;
  modalClosed(): void;
};

const modal: FunctionComponent<ModalProps> = ({
  children,
  modalClosed,
  show
}) => (
  <Aux>
    <Backdrop show={show} clicked={modalClosed} />
    <div>{children}</div>
  </Aux>
);

Ответ №1:

Хотя это просто замечательно, я бы порекомендовал следующее, основываясь на примерах / репозиториях, которые я видел в Интернете.

Во-первых, используя interface вместо type 

 interface ModalProps {
  children: ReactElement<any>;
  show: boolean;
  modalClosed(): void;
}

Это упрощает расширение вашего интерфейса. Например, при использовании MaterialUI

 interface ModalProps extends WithStyles<typeof modalStyles> {
  children: ReactElement<any>;
  show: boolean;
  modalClosed(): void;
};

И, во-вторых, я видел следующий способ ввода функциональных компонентов больше, чем что-либо другое, хотя я не уверен, есть ли за этим веская причина. 

 const modal = ({
  children,
  modalClosed,
  show
} : ModalProps) => (
  <Aux>
    <Backdrop show={show} clicked={modalClosed} />
    <div>{children}</div>
  </Aux>
);

Редактировать:
Последнее, что я должен добавить, что также является скорее стандартом, чем правилом, — это способ объявления функций.

 modalClosed: () => void;

Комментарии:

1. modalClosed: () => void; AFAIK это стандартный способ в ES amp; modalClosed(): void;

2. const modal = ({ дочерние элементы, modalClosed, show } : ModalProps Я думаю, что лучше использовать FunctionComponent<ModalProps> с общим

3. @user3887366 Не могли бы вы, пожалуйста, процитировать какую-нибудь статью или популярный репозиторий, который следует за этим? Я хотел бы сослаться на это, если я изменю свой ответ. Например, я нашел определенно типизированное репозиторий react-redux , используя описанный выше метод. В то время как репозиторий material-ui использует метод, который вы и OP использовали для определения функций.