如何使vs代码自动完成React组件的prop类型？

Question

如何在VSX标记中使用组件时使VS代码自动完成React组件的prop类型？

P.S。：我使用的是JS，而不是TS。

Answer 1

我注意到如果你有一个无状态组件并且你使用ES6获得道具，当你使用这个组件时，你会获得带有自动完成的道具。

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

Answer 2

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

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

Answer 3

对于VS Code和React Class Component，您可以执行以下操作：

// Display.js

/* @flow */

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

import "./Display.css";


type Props = {
  /**
   * "value" to display
   */
  value?: String | Number
}

export default class Display extends React.Component<Props> {
  static propTypes = {
    value: PropTypes.string
  };

  render() {
    return (
      <div className="component-display">
        <div>{this.props.value}</div>
      </div>
    );
  }
}

在上级组件中，无论您使用<Display />组件在哪里，输出都将像这样：

Answer 4

您还可以从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