Why can components return only one node in ReactJS? (Is there a fundamental reason?)

Question

From the docs:

Maximum number of JSX root nodes

Currently, in the render component, you can return only one node; if you have, say, a list of divs for return, you must wrap your components in a div, span, or any other component.

Do not forget that JSX compiles into regular js; returning two functions doesn't really make syntactical meaning. Similarly, do not put more than one child in triple form.

The above explanation says “for now”, which indicates that a component that could potentially return a function that leads to two nodes instead of one. Is it just a technical limitation, or is it baked in philosophy?

As I thought of this question: I am in a situation where I am trying to display the Bootstrap menu using React, and Bootstrap uses child selectors instead of child selectors, which makes perfect sense.

---

Beyond this: How I solved my specific problem:

I'm interested in React architecture, but if you're interested, this was my situation.

Currently in Bootstrap you can create a drop-down menu:

<li role="presentation" class="dropdown pull-right">
    <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="true"> Menu <span class="caret"></span> </a>
    <div id="macroMenu" class="react-component">
        <ul class="macroInsertion dropdown-menu" role="menu">
            <li>
                <form class="navbar-form navbar-left" role="search">
                    <div class="form-group">
                        <input type="text" class="form-control search-filter" placeholder="Search" />
                    </div>
                </form>
            </li>
            <li>
                <a href="#">Menu 1</a>
            </li>
            <li>
                <a href="#">Menu 2</a>
            </li>
            <li class="divider"></li>
            <li>
                <a href="#">Menu 3</a>
            </li>
        </ul>
    </div>
</li>

The default Bootstrap stylesheet has selectors, such as .pull-right> .dropdown-menu and .open> .dropdown-menu, although this does not work if you insert one element between the container and the contained one. This makes sense because it seems to be faster, and Bootstrap can sometimes deal with double nested selectors, but it violated our system to have a .react component in the middle.

, .react- , .

Answer 1

. () :

var Foo = React.createClass({
  render(){
    return [<Bar />, <Baz />];
  }
});

var Quux = React.createClass({
  render(){
    return <div><span /><Foo /></div>;
  }
});

<Quux /> :

<div>
    <span />
    <Bar />
    <Baz />
</div>

HTML (, , ), , (, display: inline-block) (>) sibling (~ +).

, , , , .

var Foo = function(props){
    return [<Bar />, <Baz />];
}

var Quux = React.createClass({
  render(){
    return <div>{flatten( <span />, Foo({}) )}</div>;
  }
});


// usually you get this from underscore or similar
var flatten = function(){ return Array.prototype.reduce.call(arguments, function(acc, x){ return acc.concat(x) }, []) };