WebStorm 2020.3 - 如何启用 React 道具智能感知？

Question

我正在研究 React 项目，WebStorm 是我的 IDE 但我注意到每当我想为我的组件编写一些道具时我都没有得到正确的智能感知。我正在使用 Create-React-App 和 React-CSS-Modules 作为样式库。

复选框组件：

const CheckboxWrapperInner = ({
  isSelected,
  customStyleName = 'checkbox',
  hex6Color = '#221ecc',
  additionalSelectedStyles = {
    borderColor: hex6Color || '#221ecc',
  },
  additionalUnselectedStyles = {
    backgroundColor: 'transparent',
  },
  label,
  onClick = () => {},
}) 

// ... some code

const CheckboxInner = ({...rest}) => {
  return <CheckboxWrapper customStyleName="checkbox" {...rest}></CheckboxWrapper>;
};

const CheckboxWrapper = CSSModules(CheckboxWrapperInner, style, {
  allowMultiple: true,
  handleNotFoundStyleName: 'ignore',
});
export const Checkbox = CSSModules(CheckboxInner, style, {allowMultiple: true});

Answer 1

道具完成不适用于具有 HOC 的组件（如 export default withStyles(styles)(MyComponent) 等）。并且每个 HOC 都需要添加一个特殊的支持。相关工单：WEB-38369, WEB-47862

WebStorm 2020.3 - 如何启用 React 道具智能感知？

WebStorm 2020.3 - how to enable React props intellisense?

webstorm

reactjs