|
23.12.2018, 13:01
#39751833
Ссылка:
Ссылка на сообщение:
Ссылка с названием темы:
|
|
|
|
Делаю проект на ReactJS. Поставил модуль reactstrap для элементов из bootstrap4.
У меня есть табы из reactstrap:
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
130.
131.
132.
133.
134.
135.
136.
137.
138.
139.
140.
141.
142.
143.
144.
145.
146.
147.
148.
149.
150.
151.
152.
153.
154.
155.
156.
157.
158.
159.
160.
161.
162.
163.
164.
165.
166.
167.
168.
169.
170.
171.
172.
173.
174.
175.
176.
177.
178.
179.
180.
181.
182.
183.
184.
185.
186.
187.
188.
189.
190.
191.
192.
193.
194.
195.
196.
197.
198.
199.
200.
201.
202.
203.
204.
205.
206.
207.
208.
209.
210.
211.
212.
213.
214.
<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>
<TabContent activeTab={this.state.activeTab}>
<TabPane tabId={"signInTab"}>
<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>
<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>
Так все работает. Я захотел перенести контент для табов в отдельные компоненты.
1.
2.
3.
4.
5.
<TabContent activeTab={this.state.activeTab}>
<SignInTab/>
<SignUpTab/>
<TermsTab/>
</TabContent>
И вот тут при компиляции возникла ошибка:
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
./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
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
{
"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"
}
}
|
|
|
