Suck Less at React: Understanding refs

refs-instance-of.jsx

import React from 'react'
import propTypes from 'prop-types'
import { render } from 'react-dom'

class Span extends React.Component {
  static propTypes = {
    children: propTypes.node.isRequired,
  }
  render() {
    return <span>{this.props.children}</span>
  }
}

class App extends React.Component {
  handleRefHTMLElement(ref) {
    console.log('span html element:', ref instanceof HTMLSpanElement)
  }
  handleRefInstance(ref) {
    console.log('Span Component:', ref instanceof Span)
  }
  render() {
    return [
      <span key="0" ref={this.handleRefHTMLElement}>
        Span Element
      </span>,
      <Span key="1" ref={this.handleRefInstance}>
        Span Component
      </Span>,
    ]
  }
}

render(<App />, document.getElementById("root"))