Portal.jsx

"use strict";

import ReactDOM from 'react-dom';
import React from 'react';

class App extends React.Component {
	constructor(props) {
		super(props)
		this.state = {stateVal: 0};
	}

	updateState() {
		this.setState({stateVal: this.state.stateVal + 1});
	}

	render() {
		return (
			<div>
				<h1>Title</h1>
				<div className="tile">
				<button onClick={this.updateState.bind(this)}>Update Global</button>
				</div>
				<div>
					<div>
						<div>
						<Portal>
							<Updater propVal={this.state.stateVal}/>
						</Portal>
						</div>
					</div>
				</div>
				<div className="tile">Junk after the dialog</div>
			</div>
		);
	}
}

class Portal extends React.Component {
	constructor(props) {
		super(props);
		var div = document.createElement('div');
		document.body.appendChild(div);
		this.state = {node: div};
	}

	componentWillMount() {
		ReactDOM.render(this.renderChild(this.props), this.state.node);
	}

	componentWillReceiveProps(nextProps) {
		ReactDOM.render(this.renderChild(nextProps), this.state.node);
	}

	renderChild(props) {
		return props.children;
	}

	render() {
		return null;
	}
}

class Updater extends React.Component {
	constructor(props) {
		super(props);
		this.state = {stateVal: 0};
	}
	
	updateState() {
		this.setState({stateVal: this.state.stateVal + 1});
	}

	render() {
		return (
			<div className="tile">
				<span>Global: {this.props.propVal}</span>
				<span>Local: {this.state.stateVal}</span>
				<button onClick={this.updateState.bind(this)}>Update Local</button>
			</div>
		);
	}
}


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