javascript - react+react-router 对所有组件作统一处理的方法
本文介绍了javascript - react+react-router 对所有组件作统一处理的方法的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
遇到一个需求 需要在每个组件中处理一件相同的事情,但是几十个组件如果把同样的代码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);
或者高级点
@HOC
export default class Component extends React.Component {
//...bla...bla...bla
}
这篇关于javascript - react+react-router 对所有组件作统一处理的方法的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文