reactjs - 如何在 VS Code 的 React Element 中显示可用的道具选项？

Question

我只是想知道如何在使用 VS Code 时为 React 中的一个组件显示一些可用的道具

例如当我有这个组件时

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当我在某处导入组件并自动显示可用道具时？

标签： reactjsvisual-studio-code

Answer 1

编辑：有两种方法：将组件重写为 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
}

所以稍后当你输入时，你会看到这个

干净整洁。