Webstorm中VTL模板提取React函数组件Props解构不全问题修复

当你用WebStorm提取带多Props的JSX为React组件时，现有模板只解构第一个Props的问题，根源确实是没遍历所有Props键。以下是修复后的VTL模板：

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

const ${NAME} = ({${#PROPS}, ${PROP_KEY}${/PROPS}}) => {
  return (
    ${COMPONENT_BODY}
  );
};

${NAME}.propTypes = ${PROP_TYPES};

export default ${NAME};

模板说明 #

• ${#PROPS}, ${PROP_KEY}${/PROPS} 是VTL的遍历语法，会遍历所有传入的Props键，用逗号分隔后生成完整的解构列表
• 保留了预定义变量${NAME}、${COMPONENT_BODY}、${PROP_TYPES}的原有作用

生成效果示例 #

针对你提供的按钮代码，修复后的模板会生成：

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

const CancelButton = ({color, onClick, onBlur}) => {
  return (
    <button color="primary" onClick={reset} onBlur={handleBlur}>
      Cancel
    </button>
  );
};

CancelButton.propTypes = {
  color: PropTypes.string,
  onClick: PropTypes.func,
  onBlur: PropTypes.func
};

export default CancelButton;

内容的提问来源于stack exchange，提问作者klaurtar1