如何让 VS Code 自动完成 React 组件的 prop 类型？

Question

如何在使用JSX标记时，使VS Code自动完成React组件的属性类型？注意：我正在使用JS而不是TS。

- MaxPrilutskiy

---

可能是Visual Studio Code中的React智能感知的重复问题。 - caesay

VS Code仍需更新更多功能，而Webstorm则默认提供了这些功能。 - stak

这个问题推荐了一种解决方法：https://github.com/Microsoft/vscode/issues/24926#issuecomment-294992766，我会尝试将其发布为答案。 - Chiptus

如果您的唯一目的是使用React和JS，我建议您使用https://nuclide.io/与`ATOM`。 - STEEL

如果提供了 JSDoc 的 @param，则可以完全自动完成。否则，TypeScript 是解决方案。 - Filip Seman

Answer 1

还有使用@params定义的选项：

/**
 * 
 * @param {{header: string, subheader: string, imageAlt: string, contentList: Array, orderLink: Object, contentLink: Object}} props 
 */
export default function JumbotronMain(props) {...}

- Lukas Bares

---

这似乎不能在类组件中使用？ - gaurav5430

Answer 2

我注意到如果您有一个状态组件并使用ES6获取props，当您使用此组件时，将会自动填充props。

const Stateless = ({ prop1, prop2 }) => {
  return (
    <div></div>
  )
}

- Rafael Grilli

Answer 3

你还可以从PropTypes获得智能感知支持。 你需要安装prop-types

import React from "react"
import PropTypes from 'prop-types';

function Header(props) {
  return <h1>{props.headerText}</h1>
}

Header.propTypes = {
    headerText: PropTypes.string.isRequired
}

export default Header

- KyleMit

---

这似乎只适用于函数组件。 - gaurav5430

我还没有检查过，但我相信你可以通过类组件的方式来实现这个功能。静态属性propTypes = { headerText: PropTypes.string.isRequired, // <-- 我该如何验证这是一个组件类（或无状态函数式组件）？ }; - Muhammad Haroon Iqbal

@gaurav5430 不，你也可以在类组件中实现这个。请查看此评论 https://dev59.com/l1cP5IYBdhLWcg3wcZck#72983342 - Hasitha Priyasad Wijerathna

Answer 4

对于类组件，您可以使用propTypes来完成此任务，您可以查看此链接以获取详细信息 -> Link

import PropTypes from 'prop-types';

class Greeting extends React.Component {
 render() {
  return (
  <h1>Hello, {this.props.name}</h1>
    );
  }
}

Greeting.propTypes = {
  name: PropTypes.string
};

- Hasitha Priyasad Wijerathna