IntelliSense无法与我自己的React组件库一起使用

时间:2018-11-17 14:46:55

标签: javascript reactjs ecmascript-6 react-proptypes

IntelliSense不会显示我的React库中的组件接受的道具。该库通过Webpack捆绑到UMD模块中(如果重要的话,请输入 )。

当我尝试查看组件需要的道具时,这就是我的IDE中的样子:

enter image description here

与其他元素/组件相比...

enter image description here

如何使IntelliSense与组件配合使用?

1 个答案:

答案 0 :(得分:0)

晚了参加聚会,但希望这会有所帮助。

我在使用汇总库构建组件库时遇到了同样的问题。

我正在使用@ babel / plugin-proposal-class-properties,并编写如下这样的类:

import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'

export default class Alert extends PureComponent {
    static propTypes = {
        type: PropTypes.oneOf(['success', 'info', 'warning', 'danger']),
        title: PropTypes.string,
    }

    render() {
        const { type, children } = this.props


        return (
            <div>
                <h3>{title}</h3>
                {children &&
                <div className="alert-content">
                    {children}
                </div>
                }
            </div>
        )
    }
}

在我的编译文件中,它使用defineProperty这样来定义propType:

_defineProperty(Alert, "propTypes", {
  type: PropTypes.oneOf(['success', 'info', 'warning', 'danger']),
  title: PropTypes.string
});

通过在babel-plugin上设置选项loose: true,我设法将其变成了该选项,并且intellisense在IntelliJ中起作用:

Alert.propTypes = {
  type: PropTypes.oneOf(['success', 'info', 'warning', 'danger']),
  title: PropTypes.string
};

我的.babelrc

{
  "plugins": [
    ["@babel/plugin-proposal-class-properties", { "loose": true }]
  ]
}