BaseComponent: Adding a _resolveRef helper to create memoized helpers to resolve refs.

src/common/BaseComponent.test.ts → src/common/BaseComponent.test.tsx

@@ -1,3 +1,11 @@
+/* tslint:disable:no-unused-variable */
+import * as React from 'react';
+/* tslint:enable:no-unused-variable */
+
+import * as ReactTestUtils from 'react-addons-test-utils';
+
+let { expect } = chai;
+
 import { BaseComponent } from './BaseComponent';
 
 let { assert } = chai;
@@ -54,6 +62,22 @@ describe('BaseComponent', () => {
   _buildTestFor('render');
   _buildTestFor('componentDidUpdate');
   _buildTestFor('componentWillUnmount');
+
+  it('can resolve refs', () => {
+    class Foo extends BaseComponent<{}, {}> {
+      public root: HTMLElement;
+
+      public render() {
+        return <div ref={ this._resolveRef('root') } />;
+      }
+    }
+
+    let component = ReactTestUtils.renderIntoDocument(
+      <Foo />
+    ) as any;
+
+    expect(component.root).to.exist;
+  });
 });
 
 function _buildTestFor(methodName) {

src/common/BaseComponent.ts

@@ -18,6 +18,7 @@ export class BaseComponent<P, S> extends React.Component<P, S> {
   private __async: Async;
   private __events: EventGroup;
   private __disposables: IDisposable[];
+  private __resolves: { [ name: string ]: (ref: any) => any };
 
   /**
    * BaseComponent constructor
@@ -103,6 +104,29 @@ export class BaseComponent<P, S> extends React.Component<P, S> {
 
     return this.__events;
   }
+
+  /**
+   * Helper to return a memoized ref resolver function.
+   * @params refName Name of the member to assign the ref to.
+   *
+   * @examples
+   * class Foo extends BaseComponent<...> {
+   *   private _root: HTMLElement;
+   *
+   *   public render() {
+   *     return <div ref={ this._resolveRef('_root') } />
+   *   }
+   * }
+   */
+  protected _resolveRef(refName: string) {
+    if (!this.__resolves) {
+      this.__resolves = {};
+    }
+    if (!this.__resolves[refName]) {
+      this.__resolves[refName] = (ref) => this[refName] = ref;
+    }
+    return this.__resolves[refName];
+  }
 }
 
 /**