fix(transformer): 循环中 ref 的组件不是根组件或自带 ID 无效，close #1395

NervJS · Dec 10, 2018 · b1fa2b9 · b1fa2b9
1 parent f7e92d7
commit b1fa2b9
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 9 deletions.
diff --git a/packages/taro-transformer-wx/src/class.ts b/packages/taro-transformer-wx/src/class.ts
@@ -208,7 +208,8 @@ class Transformer {
           return
         }
         const idAttr = findJSXAttrByName(attrs, 'id')
-        let id = createRandomLetters(5)
+        let id: string = createRandomLetters(5)
+        let idExpr: t.Expression
         if (!idAttr) {
           if (loopCallExpr && loopCallExpr.isCallExpression()) {
             const [ func ] = loopCallExpr.node.arguments
@@ -230,8 +231,12 @@ class Transformer {
           const idValue = idAttr.value
           if (t.isStringLiteral(idValue)) {
             id = idValue.value
-          } else if (t.isJSXExpressionContainer(idValue) && t.isStringLiteral(idValue.expression)) {
-            id = idValue.expression.value
+          } else if (t.isJSXExpressionContainer(idValue)) {
+            if (t.isStringLiteral(idValue.expression)) {
+              id = idValue.expression.value
+            } else {
+              idExpr = idValue.expression
+            }
           }
         }
         if (t.isStringLiteral(refAttr.value)) {
@@ -251,9 +256,10 @@ class Transformer {
             const type = DEFAULT_Component_SET.has(componentName) ? 'dom' : 'component'
             if (loopCallExpr) {
               this.loopRefs.set(path.parentPath.node as t.JSXElement, {
-                id,
+                id: idExpr! || id,
                 fn: expr,
-                type
+                type,
+                component: path.parentPath as NodePath<t.JSXElement>
               })
             } else {
               this.refs.push({

diff --git a/packages/taro-transformer-wx/src/interface.d.ts b/packages/taro-transformer-wx/src/interface.d.ts
@@ -2,7 +2,8 @@ import { NodePath } from 'babel-traverse'
 import * as t from 'babel-types'
 
 interface LoopRef {
-  id: string,
+  id: string | t.Expression,
   fn: t.FunctionExpression | t.ArrowFunctionExpression | t.MemberExpression,
   type: 'component' | 'dom',
+  component: NodePath<t.JSXElement>
 }
diff --git a/packages/taro-transformer-wx/src/render.ts b/packages/taro-transformer-wx/src/render.ts
@@ -1073,9 +1073,15 @@ export class RenderParser {
       }
       const blockStatementPath = component.findParent(p => p.isBlockStatement()) as NodePath<t.BlockStatement>
       const body = blockStatementPath.node.body
-      if (this.loopRefs.has(component.node)) {
+      let loopRefComponent: t.JSXElement
+      this.loopRefs.forEach((ref, jsx) => {
+        if (ref.component.findParent(p => p === component)) {
+          loopRefComponent = jsx
+        }
+      })
+      if (this.loopRefs.has(component.node) || loopRefComponent!) {
         hasLoopRef = true
-        const ref = this.loopRefs.get(component.node)!
+        const ref = this.loopRefs.get(component.node)! || this.loopRefs.get(loopRefComponent)
         const [ func ] = callee.node.arguments
         let indexId: t.Identifier | null = null
         if (t.isFunctionExpression(func) || t.isArrowFunctionExpression(func)) {
@@ -1085,7 +1091,7 @@ export class RenderParser {
         if (indexId === null || !t.isIdentifier(indexId!)) {
           throw codeFrameError(component.node, '在循环中使用 ref 必须暴露循环的第二个参数 `index`')
         }
-        const id = t.binaryExpression('+', t.stringLiteral(ref.id), indexId)
+        const id = typeof ref.id === 'string' ? t.binaryExpression('+', t.stringLiteral(ref.id), indexId) : ref.id
         const refDeclName = '__ref'
         const args: any[] = [
           t.identifier('__scope'),