Can a react component have multiple areas for child content? Make seperate components Donot use props to pass components as children.
something like this.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | import React from 'react'; import styles from "./index.css"; export default React.createClass({ getComponent(key) { return this.props.children.filter( (comp) => { return comp.key === key; }); } render: function() { return ( <header className={styles.root}> <div className={styles.logo}> {this.getComponent('logo')} </div> <div> {this.getComponent('navbar'} </div> </header> ); } }); |
app.js
1 2 3 4 5 6 7 8 9 10 | export default React.createClass({ render: function() { return ( <Header> <Logo key="logo"/> <Navbar key="navbar"/> </Header> ); } }); |
If you like this question & answer and want to contribute, then write your question & answer and email to freewebmentor[@]gmail.com. Your question and answer will appear on FreeWebMentor.com and help other developers.
