React构造函数声明道具崩溃intellisense vscode

Question

有什么理由我不能宣布我的默认道具这样吗？我是新来的现代前端和来自js香草，对不起，如果似乎难以理解的逻辑！

class MenueButtons extends Component {
    constructor(props) {
        super(props);
        this.props = {
            /**@type {number} description*/
            count: props?.count || 0,
            /**@type {string} description*/
            test2: props?.test2 || '',
        }
    }

如果避免传递定义为ex：<MenueButtons count='0' />的所有道具，则追加此附件

Warning: MenueButtons(...): When calling super() in `MenueButtons`, make sure to pass up the same props that your component's constructor was passed.

我能看到的唯一方法就是在下课后继续这样做！

MenueButtons.defaultProps = {
    count: 0,
    test2: '',
};

但对我来说，这看起来很奇怪，我在VsCode中失去了我的智能感知！有没有办法在构造函数中声明我的道具并让intellisense正常工作？

我尝试在构造函数中声明，因为这是获得这样的智能工作的唯一方法。使用defaultProps声明，中断提示和声明性检查。

在构造函数中声明

​

只声明defaultProps

​

编辑： Ok经过多次测试，这看上去更直观，更符合逻辑。100%兼容来自vsCode IDE的intellisense。

/**Class description */
class MenueButtons extends Component {
    constructor(props) {
        super(props);
        /**@type {{aaa?: number, bbb?: string }} */
        this.props
    }

    render() {

还不完美，，如果您有其他更干净的想法，或者更多的逻辑，我愿意接受任何建议--谢谢。我还可以创建文档的typedef顶部，以便在defaultProps中共享！

    /**
        * @typedef {Object} _defaultProps - ...descriptions
        * @property {number} [_defaultProps.aaa] - ...descriptions
        * @property {string} [_defaultProps.bbb] - ...descriptions
    */

       /**@type {_defaultProps} */
        this.props

谢谢你的帮助

Answer 1

我想这里的主要问题是您试图重新分配this.props。道具应视为组件中的只读数据。