Skip to main content
Stack Overflow
  1. About
  3. For Teams

You are not logged in. Your edit will be placed in a queue until it is peer reviewed.

We welcome edits that make the post easier to understand and more valuable for readers. Because community members review edits, please try to make the post substantially better than how you found it, for example, by fixing grammar or adding additional resources and hyperlinks.

Required fields*

Required fields*

Strange React Compiler Behavior

I do the project on ReactJS. Put the reactstrap module for elements from bootstrap4.

I have reactstrap tabs:

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">&times;</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"
 }
}

Answer*

Draft saved
Draft discarded
Cancel

lang-js

AltStyle によって変換されたページ (->オリジナル) /