-1
我想知道哪種方式調用多個組件更好。在這裏，我們有一個例子它調用組件的組成型方式的另一種說法，這將是（高階功能???）哪種方式更好地調用多個組件
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'));在這裏，你會打電話登錄，其內標題是在應用程序內。
另一種方法是單獨創建每個組件都有其調用每個子組件子屬性，像這樣一個主父組件...
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'));在我看來第二種方式更清潔並且不依賴於其他組件。但我只是想清楚標準方法。