wxs的getDataset 读取不到标签上data-*的值

[Niubility-SunLight]

相关平台

微信小程序

小程序基础库: 3.7.8
使用框架: React

复现步骤

<Script module="wxsModule" src="./test.wxs"></Script>  
 {virtualOrder.map((item, index) => (
         <View
           key={item.id}
           className="draggable-item"
           data-index={index}
           onTouchStart={wxsModule.handleTouchStart}
           onTouchMove={wxsModule.handleTouchMove}
         >
           {item.id}
         </View>
       ))}

正常调用wxs中instance的getDataset会获取到index的值。

但是编译后的wxml为：

    <view bindtouchmove="{{wxsModule.handleTouchMove}}" 
               bindtouchstart="{{wxsModule.handleTouchStart}}" 
               class="draggable- item" 
               data-index="{{item.data-index}}" 
               wx:for="{{i.cn[0].cn}}" 
               wx:key="sid">{{item.cn[0].v}}
     </view>

其中data-index是这样的data-index="{{item.data-index}}"。导致获取不到

期望结果

正确获取data-*的值

实际结果

实际因为编译后wxml属性设置不正确，获取不到准确值

环境信息

👽 Taro v4.0.6


  Taro CLI 4.0.6 environment info:
    System:
      OS: Linux 6.8 Ubuntu 24.04.1 LTS 24.04.1 LTS (Noble Numbat)
      Shell: 5.2.21 - /bin/bash
    Binaries:
      Node: 20.11.0 - ~/.nvm/versions/node/v20.11.0/bin/node
      Yarn: 1.22.22 - ~/.nvm/versions/node/v20.11.0/bin/yarn
      npm: 10.2.4 - ~/.nvm/versions/node/v20.11.0/bin/npm
    npmPackages:
      @tarojs/cli: 4.0.6 => 4.0.6 
      @tarojs/components: 4.0.6 => 4.0.6 
      @tarojs/helper: 4.0.6 => 4.0.6 
      @tarojs/plugin-framework-react: 4.0.6 => 4.0.6 
      @tarojs/plugin-html: 4.0.6 => 4.0.6 
      @tarojs/plugin-platform-alipay: 4.0.6 => 4.0.6 
      @tarojs/plugin-platform-h5: 4.0.6 => 4.0.6 
      @tarojs/plugin-platform-jd: 4.0.6 => 4.0.6 
      @tarojs/plugin-platform-qq: 4.0.6 => 4.0.6 
      @tarojs/plugin-platform-swan: 4.0.6 => 4.0.6 
      @tarojs/plugin-platform-tt: 4.0.6 => 4.0.6 
      @tarojs/plugin-platform-weapp: 4.0.6 => 4.0.6 
      @tarojs/react: 4.0.6 => 4.0.6 
      @tarojs/runtime: 4.0.6 => 4.0.6 
      @tarojs/shared: 4.0.6 => 4.0.6 
      @tarojs/taro: 4.0.6 => 4.0.6 
      @tarojs/taro-loader: 4.0.6 => 4.0.6 
      @tarojs/webpack5-runner: 4.0.6 => 4.0.6 
      babel-preset-taro: 4.0.6 => 4.0.6 
      eslint-config-taro: 4.0.6 => 4.0.6 
      react: ^18.0.0 => 18.3.1 

---

补充信息

<wxs module="test" src="./test.wxs"></wxs>
<view change:prop="{{test.propObserver}}" prop="{{propValue}}" bindtouchmove="{{test.touchmove}}" class="movable"></view>

上面的change:prop（属性前面带change:前缀）是在 prop 属性被设置的时候触发 WXS 函数，值必须用{{}}括起来。类似 Component 定义的 properties 里面的 observer 属性，在setData({propValue: newValue})调用之后会触发。
以上是微信小程序原话。
针对change:prop这种形式React并不支持。所以采用changeProp={xxx}形式书写，解析的wxml也不对。wxml会解析为change-prop。暂时我写了plugin对输出文件进行文本替换。请官方看下这两个问题

[PlugLeon]

这样写亲测有效：

data-index="{{index}}"

但是这个作用域之外的变量没办法这样传进去：

const [state, setState] = useState(1)
// ...
<Script module="wxsModule" src="./test.wxs"></Script>  
 {virtualOrder.map((item, index) => (
         <View
           key={item.id}
           data-index="{{index}}"
           data-state="{{state}}" // 在 wxs 是完全读不到
           onTouchStart={wxsModule.handleTouchStart}
           onTouchMove={wxsModule.handleTouchMove}
         >
           {item.id}
         </View>
       ))}

我发现只要是用 {} 包起来的，在逻辑层读出来是 NaN，在 wxs 则是完全读不到，即便我里面写的是常量也一样：

data-state={"0"}

我也想知道如何传参进 wxs

[PlugLeon]

这样写亲测有效：

data-index="{{index}}"
但是这个作用域之外的变量没办法这样传进去：

const [state, setState] = useState(1)
// ...

<Script module="wxsModule" src="./test.wxs"></Script>

{virtualOrder.map((item, index) => (
<View
key={item.id}
data-index="{{index}}"
data-state="{{state}}" // 在 wxs 是完全读不到
onTouchStart={wxsModule.handleTouchStart}
onTouchMove={wxsModule.handleTouchMove}
>
{item.id}

))}
我发现只要是用 {} 包起来的，在逻辑层读出来是 NaN，在 wxs 则是完全读不到，即便我里面写的是常量也一样：

data-state={"0"}

我也想知道如何传参进 wxs

通过你的启发，我查看了编译之后的结果，发现这样是可以传参进去的：

dataState={state}

它会编译成：

data-state="{{item.dataState}}"

这样就可以在 wxs 通过 e.currentTarget.dataset.state 读到这个参数了

[Niubility-SunLight]

data-index="{{index}}"

const [virtualOrder, virtualOrder] = useState(1)
  <ScrollView
        id="drag-container"
        scrollY
        ref={containerRef}
        onLogWxs={logWxs}
        className="drag-container"
        onClick={() => {
          getNodeScroll();
        }}
        prop={virtualOrder} //**********
        changeProp={wxsModule.propObserver}//********** 这行编译后wxml为change-prop,必须在wxnl中手动改为change:prop
      />
// 然后在wxs中采用
 propObserver: function (newValue, oldValue, ownerInstance, instance) {
    console.log("🚀 ~ newValue:", JSON.stringify(newValue));
    if (newValue) {
      orderList = newValue;
    }
  },

按照微信文档来prop(应该也可以是其他声明)就是外部定义可以传入wxs的属性。wxs中的propObserver可以监听到prop的变化