[React+dva+umi+antd]Layout里的标题动态

使用 [React+dva+umi+antd] 技术栈的时候, dva和 umi 已经给我们带来很多便捷.
不用绑定路由, 布局等等. 把布局和页面分离开之后你会发现有个问题.
布局里有写个标题标签, 每个页面都需要绑定处理. 页面多了比较麻烦
我们平常的习惯是把标题都应该放在一个 page 里写的.
要不然标题跟页面分离开维护起来比较麻烦.
所以标题需要动态处理一下. 看下代码

文件结构

聪明的你不用多说一看代码就懂了~
有些不重要的部分已省略

 src
  └ component
      └ title.js
  └ layouts
      └ header.js
      └ index.js
  └ models
      └layout.js 

models/layout.js

export default {
  namespace: 'layout',
  state: {
    title: '含包阁',  //默认标题
  },
  subscriptions: {},
  effects: {},
  reducers: {
    updatetitle(state, action) {
      return {...state, ...action.payload};
    }
  }
};
 

component/title.js

 import React from 'react';
import {connect} from 'dva';


class Title extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      dispatch: props.dispatch,
      defaultTitle: props.title
    };

    //加载该组件时更新标题
    props.dispatch({
      type: 'layout/updatetitle',
      payload: {'title': props.children},
    });
  }

  //卸载该组件时设置默认标题
  componentWillUnmount() {
    this.state.dispatch({
      type: 'layout/updatetitle',
      payload: {'title': this.state.defaultTitle},
    });
  }

  render() {
    return (<></>);  //空空如也
  }
}

//绑定layout model ，获取title
function mapStateToProps(state) {
  const { title } = state.layout;
  return {
    title
  };
}
export default connect(mapStateToProps)(Title);

layout/index.js

import styles from './index.css';
import Header from './header.js';
import React from 'react';
import {connect} from 'dva';

function BasicLayout (props) {
  return (
    <div className={styles.normal}>
      <Header location={props.location} title={props.title}></Header>
      {props.children}
    </div>
  );
}

//绑定layout model ，获取title
function mapStateToProps(state) {
  const { title } = state.layout;
  return {
    title
  };
}

export default connect(mapStateToProps)(BasicLayout);

其他页面使用 pages/xxx.js

import Title from '../../component/title'; 

// ... 其他省略 ...

return (
    <>
      <Title>标题</Title>
      <div>其他代码</div>
    </>
);