WebStorm中VTL模板提取$PROP_TYPES所有键的问题

问题分析 #

你当前的代码仅截取了第一个冒号前的内容，因此只能拿到第一个Props键。要提取所有键，需要对$PROP_TYPES的字符串格式做分割与遍历处理。

解决方案 #

使用VTL的字符串操作和循环逻辑实现需求：

#if($PROP_TYPES)
  #set($propStr = $PROP_TYPES.substring(1, $PROP_TYPES.length() - 1)) // 移除首尾的大括号
  #set($propPairs = $propStr.split(",")) // 分割为单个键值对
  #set($propsList = [])
  #foreach($pair in $propPairs)
    #set($key = $pair.substring(0, $pair.indexOf(":")).trim()) // 提取键并去除前后空格
    #set($key = $key.replace('"', '')) // 去掉键的引号
    #set($void = $propsList.add($key))
  #end
  #set($props = "{" + $propsList.join(", ") + "}")
#end

之后直接调用$props变量，即可得到{onClick, isActive, editing}的目标格式。

代码说明 #

1. 先移除$PROP_TYPES首尾的大括号，提取出键值对的核心字符串
2. 按逗号分割字符串，得到单个键值对的数组
3. 遍历每个键值对，截取冒号前的内容，同时去除引号和多余空格
4. 将处理后的键存入列表，最后用逗号连接并重新包裹大括号

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