[英]Strange React Compiler Behavior
I do the project on ReactJS
. 我在ReactJS
上做项目。 Put the reactstrap
module for elements from bootstrap4
. 将reactstrap
模块放入bootstrap4
元素。
I have reactstrap
tabs: 我有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;
UPDATED! 更新!
So it works. 所以它有效。 I wanted to transfer content for tabs into separate components, like this: 我想将标签的内容转移到单独的组件中,如下所示:
<TabContent activeTab={this.state.activeTab}>
<SignInTab/>
<SignUpTab/>
<TermsTab/>
</TabContent>
And here an error occurred during compilation: 这里编译时发生错误:
./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>
Why? 为什么?
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"
}
}
That the error occurs in ./node_modules/reactstrap/src/Alert.js
means that a component is imported from reactstrap/src/...
instead of reactstrap
(the latter points at reactstrap/dist/...
). 在./node_modules/reactstrap/src/Alert.js
发生错误意味着组件是从reactstrap/src/...
而不是reactstrap
(后者指向reactstrap/dist/...
)。
The problem with importing from reactstrap/src
is that it contains code that needs to be transpiled. 从reactstrap/src
导入的问题是它包含需要转换的代码。 It shouldn't be imported without a good reason because projects are usually configured to not transpile modules from node_modules
, this would result in overhead and potential problems. 不应该在没有充分理由的情况下导入它,因为项目通常配置为不从node_modules
转换模块,这会导致开销和潜在问题。 In an application generated by create-react-app
, this cannot be changed without modifying Webpack configuration. 在create-react-app
,如果不修改Webpack配置,则无法更改。
Incorrect imports like reactstrap/src/...
are often added by IDE auto-imports. IDE自动导入通常会添加像reactstrap/src/...
这样的错误导入。
In case there's 如果有的话
import Alert from 'reactstrap/src/Alert.js';
import, it should be changed to 导入,应该改为
import { Alert } from 'reactstrap';
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.