我正在使用 Webstorm 作为我的 IDE。它允许我突出显示一些 JSX 并将组件提取为功能组件。支持此功能的代码位于我不熟悉的 VTL 中。当我提取这样的组件时:
<button color="primary" onClick={reset} onBlur={handleBlur}>
Cancel
</button>
VTL 应创建具有以下签名的功能组件:
interface NewComponentProps {
onClick: () => void;
onBlur: () => void;
}
const NewComponent: React.FC<NewComponentProps> = ({ onClick, onBlur }) => {
return (
<button color="primary" onClick={onClick} onBlur={onBlur}>
Cancel
</button>
);
};
然而,我编写的 VTL 返回一个具有以下签名的函数组件:
interface NewComponentProps {
onClick: () => void;
onBlur: () => void;
}
const NewComponent: React.FC<NewComponentProps> = ({ onClick }) => {
return (
<button color="primary" onClick={onClick} onBlur={onBlur}>
Cancel
</button>
);
};
这不太正确。请注意,道具的解构仅显示第一个道具,而不显示其余道具。
这是我写的错误的VTL模板:
#if($PROP_TYPES)
interface ${NAME}Props
$PROP_TYPES
#end
#if($PROP_TYPES) #set($prop = $PROP_TYPES.substring(0, $PROP_TYPES.indexOf(":")).concat("}"))#end
#set( $BODY_NO_PROPS = $COMPONENT_BODY.replace("props.", "") )
const $NAME: React.FC#if($PROP_TYPES)<${NAME}Props>#end = (#if($PROP_TYPES) $prop#end) => {
return $BODY_NO_PROPS
}
#if($DEFAULT_PROPS)
$!{NAME}.defaultProps = $DEFAULT_PROPS
#end
我相信我的问题源于VTL的这一行#if($PROP_TYPES) #set($prop = $PROP_TYPES.substring(0, $PROP_TYPES.indexOf(":")).concat("}"))#end
我认为数据结构是一个地图,我的代码没有循环遍历地图来获取地图的所有键来显示所有道具。
Predefined variables will take the following values:
${NAME} - component name
${COMPONENT_BODY} - component body
${PROP_TYPES} - props type definition
我怎样才能重写这个模板以采用我想要的形式?