封装Route
export function createRoute(path, store, Page) {
return (
<Route
exact
path={path}
render={props => (
<Provider store={store} publicStateStore={publicStateStore} publicModalStore={publicModalStore}>
<Page {...props} />
</Provider>
)}
/>
)
}
export function createRouteWithoutStore(path, Page) {
return <Route exact path={path} render={props => <Page {...props} />} />
}
export function createSimplePage(store, Page) {
return props => {
return (
<Provider store={store} publicStateStore={publicStateStore} publicModalStore={publicModalStore}>
<Page {...props} />
</Provider>
)
}
}
判断中文英文国际化
export function getLanguage(language = 'zh_CN') {
language = cookie.get('language')
if (process.env.NODE_ENV !== 'production') {
language = localStorage.getItem('__dev_i18n__')
}
if (!language || language === 'undefined') {
return 'zh_CN'
}
return language
}
自定义uuid
export function uuid() {
function s4() {
return Math.floor((1 + Math.random()) * 0x10000)
.toString(16)
.substring(1)
}
return s4() + s4() + s4() + s4() + s4() + s4() + s4() + s4()
}
export function uuid() {
let i, random;
let uuid = '';
for (i = 0; i < 32; i++) {
random = (Math.random() * 16) | 0;
if (i === 8 || i === 12 || i === 16 || i === 20) {
uuid += '-';
}
uuid += (i === 12 ? 4 : i === 16 ? (random & 3) | 8 : random).toString(16);
}
return uuid;
}
封装面包屑(比较喜欢第二种方式)
方式一:
function Layout({ children, store, className = '', loaded = false, simple = false, ...props }) {
let { breadcrumbConfig, pageLoaded } = store
return (
<>
{simple ? null : (
<Breadcrumb style={{ top: normalizeTop(55) }}>
{breadcrumbConfig.map((item, index) => {
let last = index === breadcrumbConfig.length - 1
return (
<Breadcrumb.Item key={`breadcrumb_${index}`}>
{last ? <span>{item.name}</span> : <Link to={item.path}>{item.name}</Link>}
</Breadcrumb.Item>
)
})}
</Breadcrumb>
)}
<Content loaded={loaded} pageLoaded={pageLoaded} className={className}>
{children}
</Content>
</>
)
}
const PageLayout = inject('store')(observer(Layout))
export default PageLayout
// 使用方法
<PageLayout className="page" simple>
<page />
</PageLayout>
方式二:
// 配置面包屑
const { location } = this.props;
const pathSnippets = location.pathname.split('/').filter(i => i);
const breadcrumbItems = pathSnippets.map((_, index) => {
let url = `/${pathSnippets.slice(0, index + 1).join('/')}`;
const href = url.indexOf('/resource/maintain/') !== -1 ? url + location.search : url;
if (index === pathSnippets.length - 1) {
// 面包屑配置文件
return <Breadcrumb.Item key={href}>{breadcrumbNameList[url]}</Breadcrumb.Item>;
}
return (
<Breadcrumb.Item key={url}>
<Link to={href}>{breadcrumbNameMap[url]}</Link>
</Breadcrumb.Item>
);
});
<Authority type="page" code={code}>
{' '}
{/* 高阶组件权限验证 */}
<Breadcrumb>{breadcrumbItems}</Breadcrumb>
{this.props.children}
</Authority>
const breadcrumbNameList = {
'/index': "首页",
'/index/home': "主页",
'/filters/search': "搜索",
...
};
export default breadcrumbNameList;
用好继承
- react推荐使用组合的方式,但是继承也并非一无是处,用好继承也是事半功倍,组件之间应当尽可能的使用组合的方式,并且我们也是这么做的。
- 同时在使用状态管理工具时,无论是redux,Mobx 都可以采取继承的方式来进行对store的复用。
使用es新语法
- 通过组合使用filter,reduce,includes,map,some,every,等方法处理数据会有很大收获。