Использование классов начальной загрузки с компонентами в стиле reactjs

В настоящее время код выглядит следующим образом

 <PageWrapper className = "row">
    <div className = "col-xl-4 col-md-6 nopadding">
      <List locationList = {sampleLocationList}
        onTableRowClicked = {this.getSelectedLocation}
        selectedLocation = {this.state.selectedLocationInfo} />
    </div>
  </PageWrapper>

В основном я использую имена классов начальной загрузки для получения стилей. Это правильный подход?

Как использовать стили начальной загрузки в стилизованных компонентах?

reactjs styled-components

02.01.2019 07:54

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

2 060

Ответы 1

Вы можете использовать библиотеку реактивной начальной загрузки в своем приложении. Проверьте ниже образец кода

import React, { Component } from 'react';
import { Form, FormGroup, Col, FormControl, Button } from 'react-bootstrap';

import './User.css';

class User extends Component {

    constructor(props, context) {

    }

    render() {
        return (
            <div className = "User-form">
                <Form horizontal>
                    <FormGroup controlId = "formHorizontalName">
                        <Col className = "control-label" sm = {2}>
                            Name
                        </Col>
                        <Col sm = {10}>
                            <FormControl type = "text" placeholder = "Name" value = {this.state.userName} required />
                        </Col>
                    </FormGroup>

                    <FormGroup controlId = "formHorizontalEmail">
                        <Col className = "control-label" sm = {2}>
                            Email
                    </Col>
                        <Col sm = {10}>
                            <FormControl type = "email" value = {this.state.userEmail} placeholder = "Email" required />
                        </Col>
                    </FormGroup>
                    <FormGroup>
                        <Col sm = {12}>
                            <Button type = "submit" bsStyle = "primary">Submit</Button>
                        </Col>
                    </FormGroup>
                </Form>
            </div>
        );
    }
}

export default User;

Ссылка Реагировать на бутстрап

Кроме того, вы можете определить собственный css, я определил один класс с именем User-form и поместил код css в файл User.css

02.01.2019 08:11