Как показать доступные параметры реквизита в элементе React в VS Code?

#reactjs #visual-studio-code

#reactjs #visual-studio-код

Вопрос:

мне просто интересно, как показать некоторые доступные реквизиты для одного компонента в React при использовании VS Code

например, когда у меня есть этот компонент

 export function CustomWarning = (props)=>{

  return <Modal show={props.show} onClose={props.onClose} type={props.type}/>

}

CustomWarning.propTypes ={
  show : PropTypes.bool,
  onClose : PropTypes.func,
  type : PropTypes.oneOf(["modalA","modalB"])
}

 

как мне показать, какие параметры есть modalA , и modalB когда я импортирую свой компонент куда-нибудь, и он автоматически отображает доступные реквизиты?

Ответ №1:

РЕДАКТИРОВАТЬ: есть 2 способа: переписать компонент в ts или использовать d.ts файл. Старый ответ, приведенный ниже, ответит на первый.

Использование d.ts

Вы можете создать d.ts файл с точно таким же именем с вашим js компонентом, например :

 type modalOptions = 'modalA' | 'modalB'

interface ModalProps {
  show : boolean,
  // in this case i say this function will not return anything
  onClose: ()=>void,
  type?: modalOptions
}

declare const Modal (props: ModalProps){}

export default Modal;

 

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


Старый ответ

Переписать в ts

На самом деле, вы можете, если выберете Typescript.

вы можете определить свои Modal такие, как

 
// Modal.tsx
type modalOptions = 'modalA' | 'modalB'

interface ModalProps {
  show : boolean,
  // in this case i say this function will not return anything
  onClose: ()=>void,
  type?: modalOptions
}


const Modal: FunctionComponent<ModalProps> = (
  {show, onClose, type}
)=>{
  return // your implementations here
}

 

поэтому позже, когда вы будете печатать, вы увидите это

ввод реквизитов типа в модальный компонент

красиво и чисто.