react_template_block.jsx

import React from 'react';
import { render } from 'react-dom';

const block = () => {
  let state = {}
  const clearState = () => {
    state = {}
  }
  
  class RenderBlock extends React.Component {
    constructor(props) {
      super(props)
      
      if (!state[this.props.type]) {
        state[this.props.type] = {}
      }
      const typeState = state[this.props.type]
      typeState.setState = this.setState.bind(this)
      typeState.forceUpdate = this.forceUpdate.bind(this)
    
    }
    render() {
      console.log('render') 
      console.log(state[this.props.type].children)
      if (state[this.props.type].children) {
        console.log('in here') 
        return <div>{state[this.props.type].children}</div>
      }
      return null
      
    }
  }

  class Block extends React.Component {
    componentWillMount() {
      let children = state[this.props.type].children
      if (children) { 
        state[this.props.type].children = children.concat(this.props.children)
      } else { 
        state[this.props.type].children = this.props.children
      }  
      state[this.props.type].forceUpdate()
    } 
    
    render() {
      return null    
    }
  }
  
  return {Block, RenderBlock, }
}

const {Block, RenderBlock} = block()

const App = () => (
  <div>
    <h2>Start editing to see some magic happen {'\u2728'}</h2>
    <RenderBlock type="head"/>
    <Block type="head"><style>blah</style><div>jah</div></Block>
    <Block type="head"><style>blah</style><div>blah</div></Block>
  </div>
);

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