Can a response component have multiple areas for children's content?

Question

Let's say I have a simple reaction component:

import React from 'react'; import styles from "./index.css"; export default React.createClass({ render: function() { return ( <header className={styles.root}> // area for child content {this.props.children} </header> ); } }); 

Now let's say that instead of one area for any child components, I would like two, for example:

 import React from 'react'; import styles from "./index.css"; export default React.createClass({ render: function() { return ( <header className={styles.root}> <div className={styles.logo}> // logo children here </div> <div> // navigation children here </div> </header> ); } }); 

I know that I could use attributes, but that would not be very elegant for a large piece of html content. How can this be done in a reaction in such a way as, for example, the named blocks in swig?

---

An example of named blocks:

 {% extends 'layout.html' %} {% block title %}My Page{% endblock %} {% block head %} {% parent %} <link rel="stylesheet" href="custom.css"> {% endblock %} {% block content %} <p>This is just an awesome page.</p> {% endblock %} 

You see that these blocks can be used by referring to their name, and thus allow the "display" of several areas of content. I hope there is an equally elegant way to respond to this, as it makes components very complex.

Answer 1

 Make seperate components Donot use props to pass components as children. something like this. 

//header.js

 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

 export default React.createClass({ render: function() { return ( <Header> <Logo key="logo"/> <Navbar key="navbar"/> </Header> ); } }); 

Answer 2

 import React, { Component } from 'react'; import styles from "./index.css"; import Logo from "./components/Logo"; import Navbar from "./components/Logo"; class Comp extends Component { render(){ return ( <Header className={styles.root} top={Logo} right={Navbar} /> ); } } class Header extends Component { render(){ let {top,rigt} =this.props; return ( <header className={styles.root}> <div className={styles.logo}> {top && <top />} </div> <div> {right && <right />} </div> </header> ); } } 

Answer 3

You can handle props as children, because technically children is just another pillar. There is nothing wrong with this approach - the authors themselves respond to the proposal ( Support for multiple insertion points for children ).

In addition, if you work in a large team of engineers, I would also suggest standardizing how you call these details, as well as their standard behavior - this is just the content or callback with which you can pass arguments. react-placeholders can help you with this. Thus, the code of your component may look like this:

 // header.jsx import React from 'react'; import withSlots from 'react-placeholders'; @withSlots('logo', 'navigation') export default class Header extends React.Component { render() { return ( <header className={styles.root}> <div className={styles.logo}> {this.props.header()} </div> <div> {this.props.navigation('home')} </div> </header> ); } } 

And this is how you insert this component

 // app.jsx import Header from 'header.jsx' export default class Header extends React.Component { render() { return ( <Header logoSlot={<img src="logo.svg" />} navigationSlot={(currentPage) => { return <a href="#" style={{ color: currentPage ? 'blue' : 'red' }}>Home</a> }} /> ); } }