奇怪的反应编译器行为

Question

我做的项目ReactJS.把reactstrap模块放在元素中bootstrap4.

我有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">&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"
  }
}

Answer 1

发生错误./node_modules/reactstrap/src/Alert.js意味着从而reactstrap/src/...不是reactstrap(后者指向reactstrap/dist/...)导入组件.

导入的问题reactstrap/src是它包含需要转换的代码.它不应该在没有充分理由的情况下导入,因为项目通常被配置为不转换模块node_modules,这将导致开销和潜在问题.在生成的应用程序中create-react-app,如果不修改Webpack配置,则无法更改.

reactstrap/src/...IDE自动导入通常会添加不正确的导入.

如果有的话

import Alert from 'reactstrap/src/Alert.js';

导入,应该改为

import { Alert } from 'reactstrap';