具有预定义prop值(如html标签)的React组件

Question

我想给我的组件属性添加值，使智能感知能够识别并显示它，这样我就可以轻松地选择它们，而不会出现任何打字错误。我也使用react@18和JS。功能组件。

<button type="values that intellisense would show" />
<MyCustomButton type="values that intellisense would show" />

我试过使用JsDoc，但这不如html标签好:为了举个例子我想让我的分量像这样。如有任何帮助，不胜感激。

Answer 1

你可以使用React Typechecking和propTypes来处理它。

例如:

import PropTypes from 'prop-types';
class Greeting extends React.Component {
render() {
return (
<h1>Hello, {this.props.name}</h1>
);
}
}
Greeting.propTypes = {
name: PropTypes.string
};

或者你可以使用Typescript，这是Typescript擅长的。下面是codesandbox的例子，用于检查道具https://codesandbox.io/s/test-tsx-forked-67765?file=/src/index.tsx