Solution 1: props

gistfile1.js

// the order of this file has to go lowest level elements first because they're referenced immediately
// as the JS first executes
var Tooltip = React.createClass({
  render: function () {
    return (
      <div className="tt">{this.props.text}</div>
    );
  }
});

var TableRow = function () {
  getDefaultProps: function () {
    return {
      tooltip: ToolTip
    }
  },

  render: function () {
    var Tooltip = this.props.tooltip;

    return (
      <tr>
        <td>{this.props.row.col1}</td>
        <td>
          {this.props.row.col1}
          <Tooltip text={this.props.row.desc} />
        </td>
      </tr>
    );
  }
};

var TableHeader = React.createClass({
  render: function () {
    return (
      <tr>
        <th>Col 1</th>
        <th>Col 2</th>
      </tr>
    );
  }
});

var Table = React.createClass({
  getDefaultProps: function () {
    return {
      tableRow: TableRow,
      tableHeader: TableHeader,
      tooltip: ToolTip
    }
  },

  getRows: function () {
    var TableRow = this.props.tableRow;

    return _.map(this.props.rows, function (row, i) {
      return <TableRow key={i} row={row} tooltip={this.props.tooltip} />
    }, this);
  },

  render: function () {
    var TableHeader = this.props.tableHeader;

    return (
      <table>
        <thead>
          <TableHeader />
        </thead>
        <tbody>
          {this.getRows()}
        </tbody>
      </table>
    );
  }
});