reactjs - 使用未声明的别名导入 React Typescript 组件
问题描述
我一直在通过JHipster学习 React,JHipster是 Angular/React 和 Spring-Boot 的样板生成器。
webapp是用Typescript而不是Javascript生成的,所以入口点如下。
app.tsx 导入下面列出的名为AppRoutes的反应组件。
我从代码中无法理解的是: routes.tsx 组件(或元素?)导出了一个Routes变量。该文件名为routes.tsx。
代码如何可能正在导入AppRoutes并且它可以工作?
- 应用程序.tsx:
import 'react-toastify/dist/ReactToastify.css';
import './app.scss';
import React from 'react';
import { connect } from 'react-redux';
import { Card } from 'reactstrap';
import { HashRouter as Router } from 'react-router-dom';
import { ToastContainer, ToastPosition, toast } from 'react-toastify';
import { IRootState } from 'app/shared/reducers';
import { getSession } from 'app/shared/reducers/authentication';
import { getProfile } from 'app/shared/reducers/application-profile';
import Header from 'app/shared/layout/header/header';
import Footer from 'app/shared/layout/footer/footer';
import { hasAnyAuthority } from 'app/shared/auth/private-route';
import ErrorBoundary from 'app/shared/error/error-boundary';
import { AUTHORITIES } from 'app/config/constants';
import AppRoutes from 'app/routes';
export interface IAppProps extends StateProps, DispatchProps {}
export class App extends React.Component<IAppProps> {
componentDidMount() {
this.props.getSession();
this.props.getProfile();
}
render() {
const paddingTop = '60px';
return (
<Router>
<div className="app-container" style={{ paddingTop }}>
<ToastContainer
position={toast.POSITION.TOP_LEFT as ToastPosition}
className="toastify-container"
toastClassName="toastify-toast"
/>
<ErrorBoundary>
<Header
isAuthenticated={this.props.isAuthenticated}
isAdmin={this.props.isAdmin}
ribbonEnv={this.props.ribbonEnv}
isInProduction={this.props.isInProduction}
isSwaggerEnabled={this.props.isSwaggerEnabled}
accountName={this.props.accountName}
/>
</ErrorBoundary>
<div className="container-fluid view-container" id="app-view-container">
<Card className="jh-card">
<ErrorBoundary>
<AppRoutes />
</ErrorBoundary>
</Card>
<Footer />
</div>
</div>
</Router>
);
}
}
const mapStateToProps = ({ authentication, applicationProfile }: IRootState) => ({
isAuthenticated: authentication.isAuthenticated,
isAdmin: hasAnyAuthority(authentication.account.authorities, [AUTHORITIES.ADMIN]),
ribbonEnv: applicationProfile.ribbonEnv,
isInProduction: applicationProfile.inProduction,
isSwaggerEnabled: applicationProfile.isSwaggerEnabled,
accountName: authentication.account.firstName
});
const mapDispatchToProps = { getSession, getProfile };
type StateProps = ReturnType<typeof mapStateToProps>;
type DispatchProps = typeof mapDispatchToProps;
export default connect(
mapStateToProps,
mapDispatchToProps
)(App);
- 路线.tsx:
import React from 'react';
import { Switch } from 'react-router-dom';
import Loadable from 'react-loadable';
import Login from 'app/modules/login/login';
import Register from 'app/modules/account/register/register';
import Activate from 'app/modules/account/activate/activate';
import PasswordResetInit from 'app/modules/account/password-reset/init/password-reset-init';
import PasswordResetFinish from 'app/modules/account/password-reset/finish/password-reset-finish';
import Logout from 'app/modules/login/logout';
import Home from 'app/modules/home/home';
import Entities from 'app/entities';
import PrivateRoute from 'app/shared/auth/private-route';
import ErrorBoundaryRoute from 'app/shared/error/error-boundary-route';
import { AUTHORITIES } from 'app/config/constants';
// tslint:disable:space-in-parens
const Account = Loadable({
loader: () => import(/* webpackChunkName: "account" */ 'app/modules/account'),
loading: () => <div>loading ...</div>
});
const Admin = Loadable({
loader: () => import(/* webpackChunkName: "administration" */ 'app/modules/administration'),
loading: () => <div>loading ...</div>
});
// tslint:enable
const Routes = () => (
<div className="view-routes">
<ErrorBoundaryRoute path="/login" component={Login} />
<Switch>
<ErrorBoundaryRoute path="/logout" component={Logout} />
<ErrorBoundaryRoute path="/register" component={Register} />
<ErrorBoundaryRoute path="/activate/:key?" component={Activate} />
<ErrorBoundaryRoute path="/reset/request" component={PasswordResetInit} />
<ErrorBoundaryRoute path="/reset/finish/:key?" component={PasswordResetFinish} />
<PrivateRoute path="/admin" component={Admin} hasAnyAuthorities={[AUTHORITIES.ADMIN]} />
<PrivateRoute path="/account" component={Account} hasAnyAuthorities={[AUTHORITIES.ADMIN, AUTHORITIES.USER]} />
<PrivateRoute path="/entity" component={Entities} hasAnyAuthorities={[AUTHORITIES.USER]} />
<ErrorBoundaryRoute path="/" component={Home} />
</Switch>
</div>
);
export default Routes;
解决方案
它之所以有效,是因为Routes.tsx
它默认导出组件,这意味着在导入它时,App.tsx
您可以将其别名为导入时想要的任何内容,它会知道将其解析为该组件。
有关在 ES6 中导出/导入的更多详细信息,请参见此处。
推荐阅读
- html - 为什么 nth-of-type 不能正常工作
- visual-studio-code - VSCode 中的部分是灰色的?
- python-requests - 使用twill和python3.6下载文件
- c++ - 类模板实例化或表达式中的内联(“单行”)函数定义
- html - 可以为元素添加淡入淡出动画使元素闪烁吗?
- javascript - 通过 express.js 中的 res.render() 传递函数并从 pug 文件中访问该函数
- google-apps-script - 无法取消链接表单 Google 应用脚本“错误:无法删除表单的目的地。请稍候,然后重试。”
- android - 在 TextFormField 中检测新行 - Flutter
- function - Google表格中查询功能中的可选值
- css - 如何在键盘可访问性焦点上关闭汉堡菜单