React项目插件总结(1)

react-document-title

1. 根据路由动态设置页面的title
2. 安装
   npm install react-document-title
3. 使用

import DocumentTitle from "react-document-title"
import { withRouter } from "react-router-dom";

class Main extends React.Component {
	
  getPageTitle = () => {
  	// 可根据相关需求自动编写关于title的逻辑函数  必须有返回值
    return 'route'
  }
  render() {
    const { pathname } = this.props.location
    return (
      <DocumentTitle title={this.getPageTitle()}> 
        <div>DocumentTitle</div>
      </DocumentTitle>
    )
  }
}

export default withRouter(Main)

react-transition-group

1. react复杂动画过渡 插件
2. 官方文档: https://reactcommunity.org/react-transition-group/
3. 安装
   npm install react-transition-group
4. 组件说明
   • Transition
   • CSSTransition
   • SwitchTransition
   • TransitionGroup

• transition

参数	说明
children	子元素
nodeRef	对需要转换的 DOM 元素的 React 引用
in	是否显示组件显示组件 触发进入或退出状态
enter	启用或禁用输入转换。
exit	启用或禁用退出转换
timeout	转换所花费得时间
addEndListener	自定义过渡结束触发器
onEnter	应用进入之前得回调
onEntering	应用“进入”状态时触发的回调
onEntered	应用“进入”状态后触发的回调
onExit	在应用“退出”状态之前触发回调
onEntering	应用“退出”状态时触发的回调
onEntered	应用“退出”状态后触发的回调

import { Transition } from 'react-transition-group';

const duration = 300;

const defaultStyle = {
  transition: `opacity ${duration}ms ease-in-out`,
  opacity: 0,
}

const transitionStyles = {
  entering: { opacity: 1 },
  entered:  { opacity: 1 },
  exiting:  { opacity: 0 },
  exited:  { opacity: 0 },
};

const Fade = ({ in: inProp }) => (
  <Transition in={inProp} timeout={duration}>
    {state => (
      <div style={{
        ...defaultStyle,
        ...transitionStyles[state]
      }}>
        I'm a fade Transition!
      </div>
    )}
  </Transition>
);

• CSSTransition

参数	说明
classNames	在组件出现、进入、退出或完成转换时应用于组件的动画 classNames
children	子元素
nodeRef	对需要转换的 DOM 元素的 React 引用
in	是否显示组件显示组件 触发进入或退出状态
enter	启用或禁用输入转换。
exit	启用或禁用退出转换
timeout	转换所花费得时间
addEndListener	自定义过渡结束触发器
onEnter	应用进入之前得回调
onEntering	应用“进入”状态时触发的回调
onEntered	应用“进入”状态后触发的回调
onExit	在应用“退出”状态之前触发回调
onEntering	应用“退出”状态时触发的回调
onEntered	应用“退出”状态后触发的回调

// 例如：classNames="fade" 可使用
fade-appear, fade-appear-active,fade-appear-done
fade-enter, fade-enter-active,fade-enter-done
fade-exit, fade-exit-active,fade-exit-done

function App() {
  const [inProp, setInProp] = useState(false);
  return (
    <div>
      <CSSTransition in={inProp} timeout={200} classNames="my-node">
        <div>
          {"I'll receive my-node-* classes"}
        </div>
      </CSSTransition>
    </div>
  );
}

.my-node-enter {
  opacity: 0;
}
.my-node-enter-active {
  opacity: 1;
  transition: opacity 200ms;
}
.my-node-exit {
  opacity: 1;
}
.my-node-exit-active {
  opacity: 0;
  transition: opacity 200ms;
}

• SwitchTransition

参数	说明
mode	过渡模式 out-in ：当前元素先转出，然后当完成时，新元素转入 in-out ：新元素首先转入，然后当完成时，当前元素转出。
children	任何Transition或CSSTransition组件

• TransitionGroup

<TransitionGroup>
	<CSSTransition
		key={pathname}
		timeout={500}
		classNames="fade"
		exit={false}
	>
	 <div>111</div>  
	</CSSTransition>
</TransitionGroup>

react-loadable

1. 动态加载导入的组件 高阶组件
2. https://www.npmjs.com/package/react-loadable
3. yarn add react-loadable

import Loadable from 'react-loadable'

Loadable({
   loader: () => import('../pages/dashboard/dashboard'),
   loading: Loading,
 })