fix:修复React Native环境下属性值中插值表达式带空格的问题

[hukz37]

修复 React Native 环境下属性插值表达式带空格导致类型错误的问题

问题描述

在使用 Mpx 框架开发跨端应用drn时，当在 React Native 环境（ios/android/harmony）下使用带空格的插值表达式作为组件属性时，会出现数据类型错误的问题。

例如：

<list testIndex="{{testIndex}} "></list>

在小程序环境下，该表达式会被正确解析为数字类型（假设 testIndex 的值为 1），但在 React Native 环境下，由于属性值中包含空格，会被当作字符串处理，最终传递给子组件的是字符串 "1 " 而不是数字 1。

这会导致在 React Native 环境下组件接收的属性类型与预期不符，可能引发运行时错误或功能异常，且对于刚接触的同学来说，排查费事费力，可能未注意到有空格的情况。

原因分析

经过源码分析，发现问题出在 @mpxjs/webpack-plugin 的模板编译器中。在处理属性值时，对于 React Native 环境没有对带空格的插值表达式进行特殊处理。

在小程序环境中，运行时环境会自动忽略插值表达式 {{}} 外的空格，正确解析表达式。但在 React Native 环境中，Mpx 需要将模板编译为 JavaScript 代码，编译过程更加严格，会将整个属性值当作字符串字面量处理。

解决方案

在 processAttrs 函数中增加针对 React Native 环境的特殊处理逻辑：

1. 检测是否为 React Native 环境（通过 isReact(mode) 判断）
2. 对于字符串类型的属性值，检查去除前后空格后是否为完整的插值表达式（以 {{ 开头，以 }} 结尾）
3. 如果是，则使用去除空格后的值进行后续的表达式解析处理

这样可以确保即使用户在插值表达式前后不小心添加了空格，也能正确解析表达式并保持数据类型不变。

变更文件

• packages/webpack-plugin/lib/template-compiler/compiler.js

测试建议

一个测试用例来验证这个修复：
官方demo中的index.mpx

<template>
  <list testIndex="{{testIndex}} "></list>
</template>

<script>
import { createPage } from '@mpxjs/core'

createPage({
  onLoad() {
    //
  },
  data: {
    testIndex: 1
  }
})
</script>

<script type="application/json">
  {
    "usingComponents": {
      "list": "../components/list"
    }
  }
</script>

官方demo中的list.mpx

<template>
  <view class="list">
    <view wx:for="{{listData}}" wx:key="*this">{{ testIndex === 1 ？'DD' : item}}</view>
  </view>
</template>

<script>
import { createComponent } from '@mpxjs/core'

createComponent({
  data: {
    listData: ['手机', '电视', '电脑']
  },
  properties: {
    testIndex: {
      type: Number,
      value: 0
    }
  },
})
</script>

<style lang="stylus">
  .list
    background-color red
</style>

<script type="application/json">
  {
    "component": true
  }
</script>

如果传值正确的话，列表应该显示DD，不正确的话，展示 手机、电视、电脑。

修复后：列表应展示DD

兼容性说明

该修改只影响 React Native 环境下的属性处理逻辑，不会影响其他平台的正常功能，是一个向后兼容的改进。

[hiyuki]

感谢PR贡献，已合入主干跟随最近版本发布。