Я делаю проект на ReactJS.Поместите модуль reactstrap для элементов из bootstrap4.
У меня есть reactstrap вкладки:
import React, {Component} from 'react';
import {
Button,
Col,
Container,
Form,
Input,
InputGroup, InputGroupAddon, InputGroupText,
Label,
Nav,
NavItem,
NavLink,
Row,
TabContent,
TabPane
} from "reactstrap";
import {Link} from "react-router-dom";
import classNames from 'classnames';
import Logo from "../../components/common/Logo";
import '../../style/page/auth/style.css';
import '../../style/page/auth/media.css';
import '../../style/page/auth/custom.css';
class LoginPage extends Component {
constructor(props) {
super(props);
this.state = {
activeTab: 'signInTab'
};
this.toggle = this.toggle.bind(this);
this.openTermsTab = this.openTermsTab.bind(this);
}
componentDidMount() {
document.title = "Авторизация";
}
toggle(tab) {
if (this.state.activeTab !== tab) {
this.setState({
activeTab: tab
});
}
}
openTermsTab(e) {
e.preventDefault();
this.toggle('termsTab');
}
render() {
return (
<main className="align-middle">
<Container>
<Row className="h-100 justify-content-center">
<Col xs={"12"} sm={"12"} md={"8"} lg={"6"} xl={"6"}>
<div className="entry-box-wrapper">
<div className="entry-box modal-content">
<div className="modal-body">
<Nav pills justified>
<NavItem>
<NavLink
className={classNames({ active: this.state.activeTab === 'signInTab' })}
onClick={() => { this.toggle('signInTab'); }}>
Авторизация
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={classNames({ active: this.state.activeTab === 'signUpTab' })}
onClick={() => {this.toggle('signUpTab')}}>
Регистрация
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={classNames({ active: this.state.activeTab === 'termsTab' })}
onClick={this.openTermsTab}>
Правила сервиса
</NavLink>
</NavItem>
</Nav>
<Logo className={"d-block mx-auto mt-4"} />
<TabContent activeTab={this.state.activeTab}>
<TabPane tabId={"signInTab"}>
<hr/>
<Form id="signInForm" >
<div className="form-group input-group">
<InputGroup>
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="fas fa-envelope"/>
</InputGroupText>
</InputGroupAddon>
<Input type="email" name="email" placeholder="Email" />
</InputGroup>
</div>
<div className="form-group input-group">
<InputGroup>
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="fas fa-unlock-alt"/>
</InputGroupText>
</InputGroupAddon>
<Input type="password" name="password" placeholder="Пароль" />
</InputGroup>
</div>
<Row>
<Col widths={["6"]}>
<div className="custom-control custom-checkbox">
<Input
type={"checkbox"}
name={"rememberMe"}
id={"singInTabRememberMe"}
className={"custom-control-input"}/>
<Label
for={"singInTabRememberMe"}
className={"custom-control-label"}>
запомнить меня
</Label>
</div>
</Col>
<Col widths={["6"]} className="text-center pl-0 pr-0">
<Link to="/admin/forgot" className="brand-link">
Не помню пароль
</Link>
</Col>
</Row>
<Button color="" className={"float-right brand-nav-btn left-filling"}>
<i><img src={process.env.PUBLIC_URL + '/img/login2.png'} alt=""/></i>
<span>
Вход
</span>
</Button>
</Form>
</TabPane>
<TabPane tabId={"signUpTab"}>
<hr/>
<Form>
<div className="form-group input-group">
<InputGroup>
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="fas fa-envelope"/>
</InputGroupText>
</InputGroupAddon>
<Input type="email" placeholder="Email" />
</InputGroup>
</div>
<div className="form-group input-group">
<InputGroup>
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="fas fa-unlock-alt"/>
</InputGroupText>
</InputGroupAddon>
<Input type="password" placeholder="Пароль" />
</InputGroup>
</div>
<div className="form-group input-group">
<InputGroup>
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="fas fa-unlock-alt"/>
</InputGroupText>
</InputGroupAddon>
<Input type="password" placeholder="Повторите пароль" />
</InputGroup>
</div>
<div className="custom-control custom-checkbox ">
<Input
type={"checkbox"}
name={"example1"}
id={"chBxTermsArgee"}
className={"custom-control-input"}/>
<Label
for={"chBxTermsArgee"}
className={"custom-control-label"}>
согласен с
<a href={"#"} className="brand-link" id="serviceTermsLink"
onClick={this.openTermsTab}>
правилами сервиса
</a>
</Label>
</div>
<Button color="" className={"float-right brand-nav-btn left-filling"}>
<i><img src={process.env.PUBLIC_URL + '/img/login2.png'} alt=""/></i>
<span>
Отправить
</span>
</Button>
</Form>
</TabPane>
<TabPane id="termsTab" tabId={"termsTab"}>
<hr/>
<div className="service-terms">
<h3>Правила предоставления услуги</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Ipsa, cumque
necessitatibus impedit delectus ratione harum nisi nemo
minus eaque,
exercitationem consequuntur. Repellat tempore molestias
dicta. Recusandae
quam rem ducimus temporibus!
Doloribus quibusdam ullam atque possimus sequi libero
inventore natus amet
facilis, minima dolore molestias accusantium nam omnis,
delectus totam fuga
quae nemo asperiores laboriosam veritatis! Ipsam aperiam
ipsa nulla vitae?
Temporibus nulla rem aspernatur eum quidem minima
voluptatum corporis libero
explicabo. Impedit distinctio deleniti labore
exercitationem quae
repudiandae consequatur? Ullam eveniet quo
exercitationem! Sint ab, nihil
placeat ea omnis libero!
Lorem ipsum, dolor sit amet consectetur adipisicing
elit. Cum, voluptatum
perspiciatis molestias reiciendis blanditiis pariatur in
sunt velit? Labore
assumenda repellendus sint molestiae debitis esse itaque
totam distinctio
perferendis reiciendis?
</p>
</div>
</TabPane>
</TabContent>
</div>
</div>
</div>
</Col>
</Row>
</Container>
</main>
);
}
}
export default LoginPage;
ОБНОВЛЕНО!
Таконо работает.Я хотел перенести контент для вкладок в отдельные компоненты, например:
<TabContent activeTab={this.state.activeTab}>
<SignInTab/>
<SignUpTab/>
<TermsTab/>
</TabContent>
И здесь во время компиляции произошла ошибка:
./node_modules/reactstrap/src/Alert.js
SyntaxError: E:\IDEA\application\node_modules\reactstrap\src\Alert.js: Unexpected token (72:4)
70 |
71 | return (
> 72 | <Fade {...attributes} {...alertTransition} tag={Tag} className={classes} in={isOpen} role="alert" innerRef={innerRef}>
| ^
73 | {toggle ?
74 | <button type="button" className={closeClasses} aria-label={closeAriaLabel} onClick={toggle}>
75 | <span aria-hidden="true">×</span>
Почему?
package.json
{
"name": "front-end-react-v1",
"version": "0.1.0",
"private": true,
"dependencies": {
"ajv": "^6.6.2",
"ajv-keywords": "^3.2.0",
"classnames": "^2.2.3",
"react": "^16.7.0",
"react-dom": "^16.7.0",
"react-native": "^0.57.8",
"react-router": "^4.3.1",
"react-router-dom": "^4.3.1",
"react-router-native": "^4.3.0",
"react-scripts": "^2.1.1",
"reactstrap": "^6.5.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^8.0.4",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1"
}
}