首页 > 开发 > HTML > 正文

react+react-router 对所有组件作统一处理的方法

2017-09-09 13:31:17  来源: 网友分享

遇到一个需求 需要在每个组件中处理一件相同的事情,但是几十个组件如果把同样的代码copy到componentWillMount中,首先重复量太大,而且一旦需要修改就是修改好几十处,我尝试了Route 的onEnter 属性,但是这样也必须在路由中给每个Route都加这个属性,请问各位大神 有没有什么办法,监听到路由变化事件或者是给所有组件同时绑定一个componentWillMount的方法呢?请赐教!

解决方案

写个HOC呗,下面代码里super的调用和自己的逻辑,顺序可以按自己的情况调整

function HOC(wrapped) {  return class Enhancer extends wrapped {    componentWillMount() {      // 调用wrapped中的componentWillMount      super.componentWillMount();            // 下面写自己的逻辑。    }  }}

调用的时候,就这么搞:

class Component extends React.Component {  // bla...bla...bla...}export default HOC(Component);

或者高级点

@HOCexport default class Component extends React.Component {  //...bla...bla...bla}