) {
15 | return class extends BaseComponent {
16 | render() {
17 | const { props } = this;
18 | return (
19 | {context => }
20 | );
21 | }
22 | };
23 | }
24 |
25 | export type ComponentDecorator = >(WrappedComponent: T) => T;
26 |
27 | // export const withRouter: ComponentDecorator = nativeWithRouter as any
28 |
29 | export const withAppContextDecorators: ComponentDecorator = withAppContext as any;
30 |
--------------------------------------------------------------------------------
/src/common/AppEvent.ts:
--------------------------------------------------------------------------------
1 | import { EventEmitter } from 'events';
2 |
3 | const PREFIX = 'app_';
4 |
5 | export function getAppEventType(type: string) {
6 | return `${PREFIX}${type}`;
7 | }
8 |
9 | /**
10 | *
11 | * app全局事件触发
12 | * @class AppEventEmitterUtils
13 | */
14 | class AppEventEmitterUtils {
15 | private emitter: EventEmitter;
16 |
17 | constructor() {
18 | this.emitter = new EventEmitter();
19 | }
20 |
21 | off = (type, cb) => this.emitter.off(getAppEventType(type), cb);
22 |
23 | emit = (type, data?) => this.emitter.emit(getAppEventType(type), data);
24 |
25 | on = (type, cb) => this.emitter.on(getAppEventType(type), cb);
26 |
27 | destroy() {
28 | if (this.emitter) {
29 | // 移除全部监听
30 | this.emitter.removeAllListeners();
31 | }
32 | }
33 | }
34 | const appEventEmitter = new AppEventEmitterUtils();
35 | export default appEventEmitter;
36 |
37 | export enum AppEventType {
38 | InvalidToken = 'invalid-token',
39 | }
40 |
--------------------------------------------------------------------------------
/src/common/Resolution.ts:
--------------------------------------------------------------------------------
1 | import { DeviceType } from '@/types/enum';
2 |
3 | export default class Resolution {
4 | static DesignScreen = {
5 | [DeviceType.PC]: {
6 | WIDTH: 845,
7 | RATIO: 100,
8 | },
9 | [DeviceType.MOBILE]: {
10 | WIDTH: 750,
11 | RATIO: 100,
12 | },
13 | [DeviceType.TV]: {
14 | WIDTH: 1920,
15 | RATIO: 100,
16 | },
17 | };
18 |
19 | /**
20 | * 获取设计分辨率
21 | */
22 | static getDesign(deviceType: DeviceType = DeviceType.MOBILE) {
23 | return Resolution.DesignScreen[deviceType];
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/src/common/TContext.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 |
3 | export default function (initValue: T) {
4 | const context: React.Context = React.createContext(initValue);
5 | return context;
6 | }
7 |
--------------------------------------------------------------------------------
/src/components/BaseComponent/index.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import produce from 'immer';
3 |
4 | /**
5 | *
6 | *
7 | * @class BaseComponent
8 | * @extends {React.Component}
9 | * @template P
10 | * @template S
11 | */
12 |
13 | /**
14 | * UI基础组件
15 | */
16 | export default class BaseComponent extends React.PureComponent {
17 | constructor(props) {
18 | super(props);
19 | console.log('BaseComponent');
20 | }
21 |
22 | /**
23 | * 重写setState方法
24 | * @param obj
25 | * @param callBack
26 | */
27 | setState(
28 | obj:
29 | | ((prevState: Readonly, props: Readonly) => Pick | S | null)
30 | | (Pick | S | null),
31 | callBack?: () => void,
32 | ): void {
33 | let fun;
34 | if (obj.constructor === Object) {
35 | fun = draft => {
36 | const keys = Object.keys(obj);
37 | // eslint-disable-next-line
38 | keys.map(item => {
39 | // eslint-disable-next-line
40 | draft[item] = obj[item];
41 | });
42 | };
43 | } else if (obj.constructor === Function) {
44 | fun = obj;
45 | }
46 |
47 | super.setState(produce(fun), () => {
48 | if (callBack) {
49 | callBack();
50 | }
51 | });
52 | }
53 |
54 | componentDidCatch(error, info) {
55 | console.log('错误信息==', this.constructor.name, '=组件出错:', error, info);
56 | // 你同样可以将错误日志上报给服务器
57 | return false;
58 | }
59 |
60 | render() {
61 | return ;
62 | }
63 | }
64 |
--------------------------------------------------------------------------------
/src/components/Button/ButtonCheck.ts:
--------------------------------------------------------------------------------
1 | /**
2 | *按钮点击间隔检测
3 | *
4 | * @export
5 | * @class Check
6 | */
7 | class ButtonCheck {
8 | private timeDelay: number;
9 |
10 | private time: number;
11 |
12 | constructor(timeDelay = 300) {
13 | this.timeDelay = timeDelay;
14 | this.time = null;
15 | }
16 |
17 | setTimeDelay(timeDelay = 300) {
18 | this.timeDelay = timeDelay;
19 | }
20 |
21 | check() {
22 | const curTime = new Date().valueOf();
23 | if (this.time) {
24 | // 如果按钮检测
25 | if (curTime - this.time <= this.timeDelay) {
26 | return false;
27 | }
28 | }
29 | this.time = curTime;
30 | return true;
31 | }
32 | }
33 |
34 | export default ButtonCheck;
35 |
--------------------------------------------------------------------------------
/src/components/Button/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import BaseComponent from '../BaseComponent/index';
3 | import ButtonCheck from './ButtonCheck';
4 | import { setTimeout, classNames, isMobile } from '@/util/index';
5 |
6 | interface IProps {
7 | disabled?: boolean;
8 | className: string;
9 | statId?: number;
10 | clickId?: string;
11 | style?: any;
12 | onClick?: Function;
13 | statMap?: any;
14 | children?: any;
15 | onMouseLeave?: any;
16 | onMouseEnter?: any;
17 | delayTime?: number;
18 | stopPropagation?: boolean;
19 | }
20 | export default class Button extends BaseComponent {
21 | private curTimeout: any;
22 |
23 | private timeout: any;
24 |
25 | private buttonCheck;
26 |
27 | private isMob;
28 |
29 | static defaultProps = {
30 | disabled: false,
31 | };
32 |
33 | state = {
34 | clicked: false,
35 | };
36 |
37 | constructor(props) {
38 | super(props);
39 | this.buttonCheck = new ButtonCheck(props.delayTime);
40 | this.isMob = isMobile();
41 | }
42 |
43 | onItemClick = (e: any) => {
44 | const { stopPropagation, disabled, delayTime, onClick } = this.props;
45 | if (stopPropagation) {
46 | e.nativeEvent.stopImmediatePropagation();
47 | e.stopPropagation();
48 | e.preventDefault();
49 | }
50 | if (!this.buttonCheck.check()) return;
51 | try {
52 | if (disabled === true) return;
53 | this.curTimeout = setTimeout(() => {
54 | this.setState({ clicked: true });
55 | }, 10);
56 | if (this.timeout) {
57 | this.timeout();
58 | }
59 | this.timeout = setTimeout(() => {
60 | this.setState({ clicked: false });
61 | }, delayTime || 200);
62 | if (onClick) {
63 | onClick(e);
64 | }
65 | } catch (error) {
66 | console.log(error);
67 | }
68 | };
69 |
70 | componentWillUnmount = () => {
71 | if (this.curTimeout) {
72 | this.curTimeout();
73 | }
74 | if (this.timeout) {
75 | this.timeout();
76 | }
77 | };
78 |
79 | render() {
80 | const { className, style, statId, clickId, disabled, ...other } = this.props;
81 | const { clicked } = this.state;
82 | const styles = disabled || this.isMob ? style : { cursor: 'pointer', ...style };
83 | return (
84 |
90 | {this.props.children}
91 |
92 | );
93 | }
94 | }
95 |
--------------------------------------------------------------------------------
/src/components/DropDownMenu/index.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/qyjandroid/react-project-template/6309d4b15dbcbd7a2b108d14ab0954c8ce08a9c1/src/components/DropDownMenu/index.scss
--------------------------------------------------------------------------------
/src/components/DropDownMenu/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import BaseComponent from '../BaseComponent';
3 | import { isContains, addEventListenerWrap } from './popUtils';
4 | import './index.scss';
5 | import Button from '../Button';
6 |
7 | interface Props {
8 | /**
9 | * 按钮
10 | * @memberOf Props
11 | */
12 | renderBtnView: () => JSX.Element;
13 |
14 | /**
15 | *
16 | *
17 | * 弹窗内容
18 | * @memberOf Props
19 | */
20 | renderPopContentView: () => JSX.Element;
21 |
22 | /**
23 | *
24 | * 弹窗根节点范围
25 | * @memberOf Props
26 | */
27 | getRootDomNode?: () => HTMLElement;
28 |
29 | /**
30 | * 样式
31 | * @type {string}
32 | * @memberOf Props
33 | */
34 | className?: string;
35 | }
36 |
37 | interface State {
38 | /**
39 | *
40 | * 是否显示pop
41 | * @type {boolean}
42 | * @memberOf State
43 | */
44 | showPop: boolean;
45 | }
46 |
47 | /**
48 | *
49 | * 更多-下拉菜单弹窗
50 | * @export
51 | * @class TipPop
52 | * @extends {BaseComponent}
53 | */
54 | export default class DropDownMenu extends BaseComponent {
55 | private domListener = null;
56 |
57 | private popupRef = null;
58 |
59 | constructor(props) {
60 | super(props);
61 | this.state = {
62 | showPop: false,
63 | };
64 | this.popupRef = React.createRef();
65 | }
66 |
67 | componentDidUpdate(_privProps, prevState) {
68 | if (!prevState.showPop && this.state.showPop) {
69 | //弹窗状态发生改变，从隐藏到显示，添加监听器
70 | this.setListener();
71 | } else if (prevState.showPop && !this.state.showPop) {
72 | ////弹窗状态发生改变，从隐藏到显示，取消监听器
73 | this.cancelListener();
74 | }
75 | }
76 |
77 | /**
78 | *
79 | *
80 | * 设置监听
81 | * @memberOf DropDownMenu
82 | */
83 | setListener = () => {
84 | //获取根节点
85 | const rootDom = this.getRootDomNode();
86 | //默认取消一次监听
87 | this.cancelListener();
88 | this.domListener = addEventListenerWrap(
89 | rootDom,
90 | 'click',
91 | event => {
92 | const { target } = event;
93 | const root = this.getRootDomNode();
94 | const popupNode = this.getPopupDomNode();
95 | //判断是根节点框中的点击事件，并且不是弹窗区域，为任意点击消失区域。
96 | if (isContains(root, target) && !isContains(popupNode, target)) {
97 | console.log('直接关闭===', target, isContains(popupNode, target));
98 | //直接关闭
99 | this.hidePop();
100 | }
101 | },
102 | true,
103 | );
104 | };
105 |
106 | /**
107 | *
108 | *
109 | * 取消监听
110 | * @memberOf DropDownMenu
111 | */
112 | cancelListener = () => {
113 | if (this.domListener) {
114 | this.domListener?.remove();
115 | this.domListener = null;
116 | }
117 | };
118 |
119 | /**
120 | *
121 | * 获取pop弹窗节点
122 | * @returns
123 | *
124 | * @memberOf DropDownMenu
125 | */
126 | getPopupDomNode() {
127 | return this.popupRef.current || null;
128 | }
129 |
130 | /**
131 | *
132 | *
133 | * 获取默认根节点
134 | * @memberOf DropDownMenu
135 | */
136 | getRootDomNode = (): HTMLElement => {
137 | const { getRootDomNode } = this.props;
138 | if (getRootDomNode) {
139 | return getRootDomNode();
140 | }
141 | return window.document.body;
142 | };
143 |
144 | /**
145 | *
146 | *
147 | * 显示弹窗
148 | * @memberOf DropDownMenu
149 | */
150 | showPop = () => {
151 | const { showPop } = this.state;
152 | console.log('点击===', showPop);
153 | //这里弹窗打开，再次点击按钮，可以关闭弹窗
154 | if (showPop) {
155 | this.setState({
156 | showPop: false,
157 | });
158 | return;
159 | }
160 |
161 | this.setState({
162 | showPop: true,
163 | });
164 | };
165 |
166 | /**
167 | *
168 | *
169 | * 隐藏弹窗
170 | * @memberOf DropDownMenu
171 | */
172 | hidePop = () => {
173 | this.setState({
174 | showPop: false,
175 | });
176 | };
177 |
178 | render() {
179 | const { className } = this.props;
180 | const { showPop } = this.state;
181 | return (
182 |
183 |
186 | {showPop ? (
187 |
{this.props.renderPopContentView()}
188 | ) : null}
189 |
20 |
21 | {message}
22 |
23 | 刷新
24 |
25 |
26 |
38 | {message}
39 |
40 | 刷新
41 |
42 |
43 |
44 | );
45 | };
46 |
47 | GlobalError.defaultProps = {
48 | message: '页面崩溃啦！',
49 | };
50 |
51 | export default GlobalError;
52 |
--------------------------------------------------------------------------------
/src/components/ErrorBoundary/ViewError/index.scss:
--------------------------------------------------------------------------------
1 | .error-custom-style-page {
2 | position: relative;
3 | height: 100%;
4 | width: 100%;
5 | font-size: 20px;
6 | .error-custom-style-mantle-page {
7 | position: relative;
8 | width: 100%;
9 | height: 100%;
10 | .error-boundary-page {
11 | width: 100%;
12 | position: absolute;
13 | top: 50%;
14 | left: 50%;
15 | transform: translate(-50%, -50%);
16 | width: 100%;
17 | text-align: center;
18 | color: #fff;
19 | &:focus {
20 | outline: none;
21 | }
22 | .reload-page {
23 | margin-left: 10px;
24 | color: #9810fd;
25 | }
26 | }
27 | }
28 | }
29 |
--------------------------------------------------------------------------------
/src/components/ErrorBoundary/ViewError/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import './index.scss';
3 |
4 | export interface IViewErrorProps {
5 | message?: string;
6 | }
7 |
8 | const onReload = (e: React.MouseEvent) => {
9 | e.preventDefault();
10 | window.location.href = window.location.href.split('#')[0];
11 | };
12 |
13 | const ViewError: React.FC = ({ message }) => (
14 |
15 |
16 |
17 | {message}
18 |
19 | 刷新
20 |
21 |
22 |
23 |
123
;
62 | //return this.getErrorComponent()
63 | // return ;
64 | }
65 |
66 | render() {
67 | if (this.state.hasError) {
68 | return this.renderErrorComponent();
69 | }
70 | return this.props.children;
71 | }
72 | }
73 |
74 | export function withErrorBoundary(Com: any, options: IErrorBoundaryProps & T) {
75 | return (props: any) => (
76 |
77 |
78 |
79 | );
80 | }
81 |
--------------------------------------------------------------------------------
/src/components/NoMatch/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | const NoMatch = () => No Match
;
4 |
5 | export default NoMatch;
6 |
--------------------------------------------------------------------------------
/src/components/Page/index.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/qyjandroid/react-project-template/6309d4b15dbcbd7a2b108d14ab0954c8ce08a9c1/src/components/Page/index.scss
--------------------------------------------------------------------------------
/src/components/Page/index.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import './index.scss';
3 | import BaseComponent from '@/components/BaseComponent';
4 | import { RouteComponentProps } from 'react-router-dom';
5 |
6 | /**
7 | *
8 | * 页面基础组件
9 | * @class Page
10 | * @extends {BaseComponent}
11 | */
12 | class Page extends BaseComponent {
13 | constructor(props) {
14 | super(props);
15 | //TODO 可以加入页面访问统计等需求
16 | console.log('page');
17 | }
18 |
19 | render() {
20 | return ;
21 | }
22 | }
23 |
24 | export default Page;
25 |
--------------------------------------------------------------------------------
/src/components/ResolutionCom/ResolutionComp.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Resolutions from '@/common/Resolution';
3 |
4 | interface IResolutionComProps {
5 | WIDTH?: number;
6 | }
7 |
8 | export default class ResolutionCom extends React.Component {
9 | componentDidMount(): void {
10 | this.resize();
11 | window.onresize = this.resize;
12 | }
13 |
14 | resize = (): void => {
15 | //获取设计稿的尺寸
16 | const design = Resolutions.getDesign();
17 | const html = document.documentElement;
18 | const getHtmlFs = () => parseFloat(window.getComputedStyle(html, null)['font-size']);
19 | const getScreenWidth = () => {
20 | let htmlWidth = 0;
21 | try {
22 | const htmlElement = document.documentElement;
23 | htmlWidth = Math.max(
24 | htmlElement.offsetWidth || 0,
25 | htmlElement.clientWidth || 0,
26 | htmlElement.getBoundingClientRect().width || 0,
27 | );
28 | // 读取失败，其他方式读取
29 | if (!htmlWidth || htmlWidth <= 0) {
30 | if (window.orientation == 180 || window.orientation == 0) {
31 | //竖屏
32 | htmlWidth =
33 | window.innerWidth ||
34 | (window.screen && window.screen.width) ||
35 | (window.screen && window.screen.availWidth) ||
36 | 0;
37 | } else if (window.orientation == 90 || window.orientation == -90) {
38 | //横屏
39 | htmlWidth =
40 | window.innerHeight ||
41 | (window.screen && window.screen.height) ||
42 | (window.screen && window.screen.availHeight) ||
43 | 0;
44 | }
45 | }
46 | } catch (e) {
47 | console.log('获取屏幕宽度出错');
48 | }
49 | return htmlWidth | 0;
50 | };
51 | const WIDTH = this.props.WIDTH || design.WIDTH,
52 | //第一次进来没有设置过html标签font-size的时候
53 | screenWidth = getScreenWidth(),
54 | htmlFs = getHtmlFs(),
55 | mediaFs = (design.RATIO / WIDTH) * screenWidth; //获取页面宽度 设备宽度/fontSize=设计稿（750）/100=7.5;
56 |
57 | html.style.fontSize = `${mediaFs}px`; //根据页面大小算出font-size
58 |
59 | //以下是特殊处理 试过一台htc下的某个浏览器设置字体大小后再获取font-size会比所设的值会相对变小 所以设置大一点让它font-size的结果是想设的结果
60 |
61 | if (htmlFs !== mediaFs && Math.abs(htmlFs - mediaFs) > 2) {
62 | html.style.fontSize = '100px';
63 | html.style.fontSize = `${(100 / getHtmlFs()) * mediaFs}px`;
64 | }
65 | };
66 |
67 | render(): React.ReactNode {
68 | return this.props.children;
69 | }
70 | }
71 |
--------------------------------------------------------------------------------
/src/index.scss:
--------------------------------------------------------------------------------
1 | @font-face {
2 | font-family: "iconfont";
3 | src: url("./assets/fonts/iconfont.ttf");
4 | }
5 |
6 | html,
7 | body {
8 | height: 100%;
9 | font-family: "iconfont" !important;
10 | margin: 0;
11 | color: #fff;
12 | }
13 |
--------------------------------------------------------------------------------
/src/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import App from '@/App';
4 | import { Provider } from 'react-redux';
5 | import history from '@/store/reducers/history';
6 | import configureStore from '@/store';
7 | import { ConnectedRouter } from 'connected-react-router';
8 | import './index.scss';
9 | import '@/assets/css/index.scss';
10 | import ResolutionCom from '@/components/ResolutionCom/ResolutionComp';
11 | import ErrorBoundary from './components/ErrorBoundary';
12 | import Modal from 'react-modal';
13 |
14 | try {
15 | const store = configureStore({});
16 | const rootElement = document.getElementById('root');
17 |
18 | Modal.setAppElement(rootElement);
19 |
20 | const renderApp = () => {
21 | ReactDOM.render(
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 | ,
31 | document.getElementById('root'),
32 | );
33 | };
34 | renderApp();
35 | } catch (e) {
36 | console.log('e');
37 | }
38 |
--------------------------------------------------------------------------------
/src/pages/Home/HomeChild/index.scss:
--------------------------------------------------------------------------------
1 | .home-child {
2 | position: relative;
3 | width: 200px;
4 | height: 200px;
5 | background: red;
6 | color: #fff;
7 | }
8 |
--------------------------------------------------------------------------------
/src/pages/Home/HomeChild/index.tsx:
--------------------------------------------------------------------------------
1 | import connect from '@/store/connect';
2 | import React from 'react';
3 | import BaseComponent from '@/components/BaseComponent';
4 | import { push } from 'connected-react-router';
5 |
6 | import './index.scss';
7 |
8 | interface IHomeChildProps {
9 | pathname?: string;
10 | search?: string;
11 | hash?: string;
12 | push?: (path: string, s?: any) => void;
13 | }
14 |
15 | const mapStateToProps = {
16 | pathname: 'router.location.pathname',
17 | search: 'router.location.search',
18 | hash: 'router.location.hash',
19 | };
20 |
21 | const mapDispatchToProps = {
22 | push,
23 | };
24 |
25 | @connect(mapStateToProps, mapDispatchToProps)
26 | class HomeChild extends BaseComponent {
27 | handleGoPage = () => {
28 | this.props.push('/page1', { a: 1 });
29 | };
30 |
31 | render() {
32 | const { pathname, search, hash } = this.props;
33 | return (
34 |
35 |
pathname::{pathname}
36 |
search::{search}
37 |
hash::{hash}
38 |
41 |
60 |
Hel4lo, World1!{userId}
61 |
{count}
62 |
63 |
64 |
37 |
Hello, Page122222!
38 |
41 |
4 | 
5 | 
6 |
7 | 
8 |
9 |