Вопрос:

Какой способ лучше назвать несколькими компонентами

javascript reactjs

61 просмотра

1 ответ

24 Репутация автора

Мне интересно, какой способ вызова нескольких компонентов лучше. Здесь у нас есть пример, который вызывает компоненты в составном типе способом, которым было бы другое слово для этого (функции высокого порядка ???)

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

На мой взгляд, второй способ намного чище и не зависит от других компонентов. Но я просто выясняю, какой путь является стандартным.

Автор: CodePanda Источник Размещён: 22.08.2016 08:38

Ответы (1)


0 плюса

242 Репутация автора

это прямо из документации React:

При разработке интерфейсов разбивайте общие элементы дизайна (кнопки, поля формы, компоненты макета и т. Д.) На повторно используемые компоненты с четко определенными интерфейсами. Таким образом, в следующий раз, когда вам понадобится создать какой-то пользовательский интерфейс, вы сможете написать гораздо меньше кода. Это означает более быстрое время разработки, меньше ошибок и меньше байтов.

Прелесть React заключается в возможности структурировать ваше приложение в простые, повторно используемые компоненты и иметь возможность передавать данные из родительских в дочерние компоненты. Таким образом, имея все ваши компоненты в одном файле, это в основном побеждает основную цель React.

Мне лично нравится иметь индексный файл, который обрабатывает мое промежуточное ПО и маршруты, а затем родительский файл для каждого раздела, который обрабатывает импорт и передачу данных.

Автор: Jamie Livingstone Размещён: 22.08.2016 08:56
Вопросы из категории :
32x32