遇到一个需求 需要在每个组件中处理一件相同的事情,但是几十个组件如果把同样的代码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}