奇怪的 React 编译器行为
Strange React Compiler Behavior
我在 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"
}
}
错误发生在./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';
我在 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"
}
}
错误发生在./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';