Добро пожаловать в форум, Guest  >>   Войти | Регистрация | Поиск | Правила | В избранное | Подписаться
Все форумы / HTML, JavaScript, VBScript, CSS Новый топик    Ответить
 Странное поведение React компилятора  [new]
Tsyklop
Member

Откуда: Украина
Сообщений: 762
Делаю проект на ReactJS. Поставил модуль reactstrap для элементов из bootstrap4.

У меня есть табы из reactstrap:

   <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>


Так все работает. Я захотел перенести контент для табов в отдельные компоненты.

<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">&times;</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"
  }
}
23 дек 18, 13:01    [21771351]     Ответить | Цитировать Сообщить модератору
 Re: Странное поведение React компилятора  [new]
SergSuper
Member

Откуда: SPb
Сообщений: 5480
а так?
Tsyklop
./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 ttributes={...attributes} alertTransition={...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>



Почему?
27 дек 18, 18:54    [21775144]     Ответить | Цитировать Сообщить модератору
 Re: Странное поведение React компилятора  [new]
irbis_al
Member

Откуда: Симферополь
Сообщений: 1466
Ну тут
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>


Ну я надеюсь компонент Fade вверху import имеется?
Мне кажется ему вот это не нравится

{toggle ?
  74 |         <button type="button" className={closeClasses} aria-label={closeAriaLabel} onClick={toggle}>
  75 |           <span aria-hidden="true">&times;</span>


Надо исключать из кода фрагменты пока не будет ругаться...
И когда поймете иначе оберенуть.
27 дек 18, 20:59    [21775252]     Ответить | Цитировать Сообщить модератору
Все форумы / HTML, JavaScript, VBScript, CSS Ответить