fix(transformer): 只有 render 开头的函数才是 render props

close #4180
NervJS · Sep 2, 2019 · e1cf11c · e1cf11c
1 parent e290a7c
commit e1cf11c
Show file tree

Hide file tree

Showing 2 changed files with 181 additions and 3 deletions.
diff --git a/packages/taro-transformer-wx/__tests__/render-props.spec.ts b/packages/taro-transformer-wx/__tests__/render-props.spec.ts
@@ -0,0 +1,176 @@
+import transform from '../src'
+import { buildComponent, baseCode, baseOptions, evalClass, Custom, prettyPrint } from './utils'
+
+describe('render props', () => {
+  test('从 props 而来的函数', () => {
+    const { template, ast, code } = transform({
+      ...baseOptions,
+      isRoot: true,
+      code: buildComponent(`
+      const {goods } = this.props;
+
+      return (
+        <View
+        >
+              {goods.sku_type && (
+                  <View>
+                    {goods.replace('')}
+                  </View>
+                )}
+        </View>
+      )
+      `, `coverView = [];text = []`)
+    })
+    // console.log(instance)
+    expect(template).toMatch(
+      prettyPrint(`
+      <block>
+          <view>
+              <block wx:if="{{goods.sku_type}}">
+                  <view>{{anonymousState__temp}}</view>
+              </block>
+          </view>
+      </block>
+    `)
+    )
+  })
+
+  test('从 props 而来的成员表达式函数', () => {
+    const { template, ast, code } = transform({
+      ...baseOptions,
+      isRoot: true,
+      code: buildComponent(`
+      const {goods } = this.props;
+
+      return (
+        <View
+        >
+              {goods.sku_type && (
+                  <View>
+                    {goods.sku_type.replace('')}
+                  </View>
+                )}
+        </View>
+      )
+      `, `coverView = [];text = []`)
+    })
+    // console.log(instance)
+    expect(template).toMatch(
+      prettyPrint(`
+      <block>
+          <view>
+              <block wx:if="{{goods.sku_type}}">
+                  <view>{{anonymousState__temp}}</view>
+              </block>
+          </view>
+      </block>
+    `)
+    )
+  })
+
+  test('从 props 而来的 render props', () => {
+    const { template, ast, code } = transform({
+      ...baseOptions,
+      isRoot: true,
+      code: buildComponent(`
+      const {goods, renderGoods } = this.props;
+
+      return (
+        <View
+        >
+              {goods.sku_type && (
+                  <View>
+                    {renderGoods()}
+                  </View>
+                )}
+        </View>
+      )
+      `, `coverView = [];text = []`)
+    })
+    // console.log(instance)
+    expect(template).toMatch(
+      prettyPrint(`
+      <block>
+          <view>
+              <block wx:if="{{goods.sku_type}}">
+                  <view>
+                    <slot name="goods"></slot>
+                  </view>
+              </block>
+          </view>
+      </block>
+    `)
+    )
+  })
+
+  test('从 props 而来的 render props 带参数', () => {
+    const { template, ast, code } = transform({
+      ...baseOptions,
+      isRoot: true,
+      code: buildComponent(`
+      const {goods, renderGoods } = this.props;
+
+      return (
+        <View
+        >
+              {goods.sku_type && (
+                  <View>
+                    {renderGoods(goods)}
+                  </View>
+                )}
+        </View>
+      )
+      `, `coverView = [];text = []`)
+    })
+    // console.log(instance)
+    expect(template).toMatch(
+      prettyPrint(`
+      <block>
+          <view>
+              <block wx:if="{{goods.sku_type}}">
+                  <view>
+                    <slot name="goods"></slot>
+                  </view>
+              </block>
+          </view>
+      </block>
+    `)
+    )
+  })
+
+  test('从 props 多层解构而来的 render props 带参数', () => {
+    const { template, ast, code } = transform({
+      ...baseOptions,
+      isRoot: true,
+      code: buildComponent(`
+      const props = this.props
+      const {goods, renderGoods } = props;
+
+      return (
+        <View
+        >
+              {goods.sku_type && (
+                  <View>
+                    {renderGoods(goods)}
+                  </View>
+                )}
+        </View>
+      )
+      `, `coverView = [];text = []`)
+    })
+    // console.log(instance)
+    expect(template).toMatch(
+      prettyPrint(`
+      <block>
+          <view>
+              <block wx:if="{{goods.sku_type}}">
+                  <view>
+                    <slot name="goods"></slot>
+                  </view>
+              </block>
+          </view>
+      </block>
+    `)
+    )
+  })
+})
diff --git a/packages/taro-transformer-wx/src/class.ts b/packages/taro-transformer-wx/src/class.ts
@@ -661,7 +661,6 @@ class Transformer {
         const scope = renderMethod! && renderMethod!.scope || path.scope
         const calleeExpr = expression.get('callee')
         const parentPath = path.parentPath
-
         if (
           hasComplexExpression(expression) &&
           !isFunctionProp &&
@@ -671,11 +670,14 @@ class Transformer {
             calleeExpr.get('property').isIdentifier({ name: 'bind' })) // is not bind
         ) {
           const calleeName = calleeExpr.isIdentifier() && calleeExpr.node.name
-          if (typeof calleeName === 'string' && isDerivedFromProps(calleeExpr.scope, calleeName)) {
+          if (typeof calleeName === 'string' && calleeName.startsWith('render') && isDerivedFromProps(calleeExpr.scope, calleeName)) {
             return
           }
           if (calleeExpr.isMemberExpression() && isDerivedFromProps(calleeExpr.scope, findFirstIdentifierFromMemberExpression(calleeExpr.node).name)) {
-            return
+            const idName = findFirstIdentifierFromMemberExpression(calleeExpr.node).name
+            if (isDerivedFromProps(calleeExpr.scope, idName) && t.isIdentifier(calleeExpr.node.property) && calleeExpr.node.property.name.startsWith('render')) {
+              return
+            }
           }
           generateAnonymousState(scope, expression, jsxReferencedIdentifiers)
         } else {