Fix PathHoister hoisting JSX member expressions on "this".

packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/member-expression-constant/actual.js

@@ -0,0 +1,4 @@
+function render() {
+  this.component = "div";
+  return () => <this.component />;
+}

packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/member-expression-constant/expected.js

@@ -0,0 +1,7 @@
+function render() {
+  this.component = "div";
+
+  var _ref = <this.component />;
+
+  return () => _ref;
+}

packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/member-expression-this/actual.js

@@ -0,0 +1,5 @@
+class Component extends React.Component {
+  subComponent = () => <span>Sub Component</span>
+
+  render = () => <this.subComponent />
+}

packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/member-expression-this/expected.js

@@ -0,0 +1,12 @@
+var _ref = <span>Sub Component</span>;
+
+class Component extends React.Component {
+  constructor(...args) {
+    var _temp;
+
+    var _ref2 = <this.subComponent />;
+
+    return _temp = super(...args), this.subComponent = () => _ref, this.render = () => _ref2, _temp;
+  }
+
+}

packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/member-expression-this/options.json

@@ -0,0 +1,3 @@
+{
+  "plugins": ["syntax-jsx", "transform-react-constant-elements", "transform-class-properties"]
+}

packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/member-expression/actual.js

@@ -0,0 +1,6 @@
+const els = {
+  subComponent: () => <span>Sub Component</span>
+};
+class Component extends React.Component {
+  render = () => <els.subComponent />
+}

packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/member-expression/expected.js

@@ -0,0 +1,16 @@
+var _ref = <span>Sub Component</span>;
+
+const els = {
+  subComponent: () => _ref
+};
+
+var _ref2 = <els.subComponent />;
+
+class Component extends React.Component {
+  constructor(...args) {
+    var _temp;
+
+    return _temp = super(...args), this.render = () => _ref2, _temp;
+  }
+
+}

packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/member-expression/options.json

@@ -0,0 +1,3 @@
+{
+  "plugins": ["syntax-jsx", "transform-react-constant-elements", "transform-class-properties"]
+}

packages/babel-traverse/src/path/lib/hoister.js

@@ -2,11 +2,23 @@ import { react } from "babel-types";
 import * as t from "babel-types";
 
 const referenceVisitor = {
+  // This visitor looks for bindings to establish a topmost scope for hoisting.
   ReferencedIdentifier(path, state) {
-    if (path.isJSXIdentifier() && react.isCompatTag(path.node.name)) {
+    // Don't hoist regular JSX identifiers ('div', 'span', etc).
+    // We do have to consider member expressions for hoisting (e.g. `this.component`)
+    if (path.isJSXIdentifier() && react.isCompatTag(path.node.name) && !path.parentPath.isJSXMemberExpression()) {
       return;
     }
 
+    // If the identifier refers to `this`, we need to break on the closest non-arrow scope.
+    if (path.node.name === "this") {
+      let scope = path.scope;
+      do {
+        if (scope.path.isFunction() && !scope.path.isArrowFunctionExpression()) break;
+      } while (scope = scope.parent);
+      if (scope) state.breakOnScopePaths.push(scope.path);
+    }
+
     // direct references that we need to track to hoist this to the highest scope we can
     const binding = path.scope.getBinding(path.node.name);
     if (!binding) return;