Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: 将style中的属性转换为合法的style={{}}格式 #179

Closed
wants to merge 3 commits into from
Closed

fix: 将style中的属性转换为合法的style={{}}格式 #179

wants to merge 3 commits into from

Conversation

Hunly520
Copy link

@Hunly520 Hunly520 commented Sep 6, 2023

这个 PR 做了什么? (简要描述所做更改)
convertor在做转换时并没有对style的静态内联样式和动态内联样式做转换,该commit主要对style属性名转小驼峰。而对于含有变量的属性值转换为${}形式。对于静态内联样式则是将其转换为react识别的style={{}}格式

这个 PR 是什么类型? (至少选择一个)

  • 错误修复(Bugfix) issue: fix #
  • 新功能(Feature)
  • 代码重构(Refactor)
  • TypeScript 类型定义修改(Typings)
  • 文档修改(Docs)
  • 代码风格更新(Code style update)
  • 其他,请描述(Other, please describe):

这个 PR 涉及以下平台:

  • 所有小程序
  • 微信小程序
  • 支付宝小程序
  • 百度小程序
  • 字节跳动小程序
  • QQ 轻应用
  • 京东小程序
  • 快应用平台(QuickApp)
  • Web 平台(H5)
  • 移动端(React-Native)
  • 鸿蒙(harmony)

styleAttrs.forEach((attr) => {
const [attrName, value] = attr.split(':')
if (attrName) {
styleKeys.push({ attrName, value })
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这里命名不太合适,改成styleAttrsMap是不是更好

styleKeys.push({ attrName, value })
}
})
styleNameToCamelCase(styleKeys)
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

函数名可改为convertStyleAttrs


// 把 style 中 {{}} 转为 ${} 格式
if (name.name === 'style' && t.isStringLiteral(path.node.value)) {
const styleValue = path.node.value as any
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这里可以封装成一个函数parseStyleAttrs,解析样式属性,下面的函数是转换样式属性

const matchs = attrValueReg.exec(attr.value)
if (matchs !== null) {
// 获取{{}}模版左右位置的值
const tempLeftValue = attr.value.split('{{')
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这里是不是可以用正则的分组来获取,上面都做了匹配了

@Hunly520 Hunly520 closed this Sep 7, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants