哪种方式更适合调用多个组件

我想知道调用多个组件的哪种方式更好。这里我们有一个例子，它以组合类型的方式调用组件另一个词是(高阶函数??)

var App = React.createClass({
    render:function () {
        return(
            <div>
                <div className="container">
                    {this.props.children}
                </div>
            </div>
        )
    }
});
// Title Component
var Title = React.createClass({
    render:function () {
        return(
            <App>
                <div className="text-center">
                    <h1>Rock App</h1>
                    <h4>An Easy Way To Track Your Rock Climbing Progress</h4>
                </div>
                {this.props.children}
            </App>
        )
    }
});
// Login Component
var Login = React.createClass({
    render:function () {
        return(
            <Title>
                <div>
                    <form className="form-horizontal">
                        <div className="form-group">
                            <label className="col-sm-2 control-label">Email</label>
                            <div className="col-sm-10">
                                <input type="email" className="form-control" id="inputEmail3" placeholder="Email"/>
                            </div>
                        </div>
                        <div className="form-group">
                            <label className="col-sm-2 control-label">Password</label>
                            <div className="col-sm-10">
                                <input type="password" className="form-control" id="inputPassword3" placeholder="Password"/>
                            </div>
                        </div>
                        <div className="form-group">
                            <div className="col-sm-offset-2 col-sm-10">
                                <button type="submit" className="btn btn-default">Sign in</button>
                            </div>
                        </div>
                    </form>
                </div>
            </Title>
        )
    }
});
ReactDOM.render(<Login/>, document.getElementById('app'));

这里你会调用Login，它在App的Title中

另一种方法是单独创建每个组件，并有一个主父组件，该父组件调用每个子组件的子属性，如…

var Title = React.createClass({
   render: function () {
       return(
           <div className="head text-center">
               <h1>Rock App</h1>
               <h3>The only app you need to track your climbs</h3>
           </div>
       )
   }
});
var Login = React.createClass({
    render: function () {
        return(
            <div>
                <form className="form-horizontal">
                    <div className="form-group">
                        <label className="col-sm-2 control-label">Email</label>
                        <div className="col-sm-10">
                            <input type="email" className="form-control" id="inputEmail3" placeholder="Email"/>
                        </div>
                    </div>
                    <div className="form-group">
                        <label className="col-sm-2 control-label">Password</label>
                        <div className="col-sm-10">
                            <input type="password" className="form-control" id="inputPassword3" placeholder="Password"/>
                        </div>
                    </div>
                    <div className="form-group">
                        <div className="col-sm-offset-2 col-sm-10">
                            <button type="submit" className="btn btn-default">Sign in</button>
                        </div>
                    </div>
                </form>
            </div>
        )
    }
});
var Homepage = React.createClass({
    render: function () {
        return(
            <div>
                <div className="container">
                    <Title>{this.props.children}</Title>
                    <Login>{this.props.children}</Login>
                </div>
            </div>
        )
    }
});

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

在我看来，第二种方法更干净，不依赖于其他组件。但我只是想知道哪种方式是标准的。