Last active
January 25, 2016 17:26
-
-
Save samsch/ebe5c1bebacec3a95ad1 to your computer and use it in GitHub Desktop.
Example of rendering to two React instances (e.g., different parts of a page) as a single component.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var Hello = React.createClass({ | |
render: function() { | |
return <div>{this.props.name}</div>; | |
} | |
}); | |
var HelloInput = React.createClass({ | |
render: function() { | |
return ( | |
<div><input value={this.props.name} onChange={ev=>this.props.update(ev.target.value)}/></div> | |
); | |
} | |
}); | |
ReactDOM.render( | |
<Hello name="World" />, | |
document.getElementById('container') | |
); | |
function render(name, updateName) { | |
ReactDOM.render( | |
<Hello name={name} />, | |
document.getElementById('container') | |
); | |
ReactDOM.render( | |
<HelloInput name={name} update={updateName} />, | |
document.getElementById('container2') | |
); | |
} | |
var name = "Hello World!"; | |
function updateName(newName) { | |
name = newName; | |
render(name, updateName); | |
} | |
render(name, updateName); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div id="container"> | |
<!-- This element's contents will be replaced with your component. --> | |
</div> | |
<div id="container2"></div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Don't actually try to run this. It's written for JSFiddle, and can be seen in this fiddle.
To actually use this pattern in an app, you would need to add actual program structure, as well as building a complete html page.