封装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，等方法处理数据会有很大收获。