mixing-stateless-with-stateful.js

'use strict';
import React from 'react';

class BaseComponent extends React.Component {
  
  componentDidMount() {
    // ref error will be given,
    // this.refs.root === <div>
    // this.refs.subrender === null
    console.log(this.refs);
  }
  
  render() {
    const {
      StatelessFunctionSubRender
    } = this;
    
    return (
      <div ref="root">
        <StatelessFunctionSubRender ref="subrender"/>
      </div>
    );
  }
  
  // despite this is a member method of BaseComponent class,
  // in BaseComponent's render() we use it as a plain function (not aware of component context)
  // thus treated as a pure stateless function
  StatelessFunctionSubRender(props) {
    return (
      <div>{props.children}</div>
    );
  }
}

export default BaseComponent;