#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
}
поэтому позже, когда вы будете печатать, вы увидите это
красиво и чисто.