Question

我想知道调用多个组件的方式更好。这里我们有一个示例，它以组合类型的方式调用组件，这将是另一个单词（高阶函数???）

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'));

在我看来，第二种方式更清洁，不依赖于其他组件。但我只想弄清楚标准是什么方式。

Answer 1

这直接来自React文档：

设计界面时，要分解常见的设计元素（按钮，表单域，布局组件等）可重用具有明确定义的接口的组件。那样，下次你需要构建一些UI，你可以编写更少的代码。这意味着更快开发时间，更少的错误和更少的字节数。

React的优点是能够将您的应用程序构建为简单，可重用的组件，并且可以选择将数据从父组件传递到子组件。因此，通过将所有组件放在一个文件中，它基本上会击败React的主要目标。

我个人喜欢有一个处理我的中间件和路由的索引文件，然后是处理导入和传递数据的每个部分的父文件。

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

1 个答案: