【发布时间】：2019-05-22 20:23:00
【问题描述】：
我在ReactJS 上做这个项目。为来自bootstrap4 的元素放置reactstrap 模块。
我有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"
}
}
【问题讨论】：
-
您如何在开发和生产中运行？它们是相同的命令吗？
-
我在 IntlijIDEA 中使用命令
npm start运行。 -
你能创建 stackblitz 来重现这个问题吗？
-
将文件重命名为
Alert.jsx有帮助吗？ -
Alert未在您发布的代码中的任何地方使用。考虑提供可以复制问题的stackoverflow.com/help/mcve。您收到此错误意味着您在某处导入了reactstrap/src（这不应该这样做），或者您错误地配置了 Webpack。后者可以排除，因为您没有弹出 CRA 项目。
标签： reactjs webpack reactstrap