React Js，重构我的重定向方法

Question

我有多个组件，我在其中检查用户是否在登录页面上进行重定向

componentWillReceiveProps({auth}) {
    if (auth) {
      this.props.history.push('/login') 
    }
  }

我已经复制了十次此代码，有最好的方法吗？我想重构你有解决方案吗？

谢谢

Answer 1

对于此类横切问题，建议使用高阶组件。

HOC 允许您包装现有组件，

以便您可以拦截props并应用高阶逻辑，例如身份验证或日志记录或其他任何内容，然后在 HOC 完成其工作时将 props 传递给包装的组件。

一个粗略的例子可能是：

function withAuth(WrappedComponent) {
    return class extends React.Component {
     componentWillReceiveProps({ auth }) {
        if (auth) {
           // redirect
        }
      }
      render() {
        return <WrappedComponent {...this.props} />;
      }
    };
  }

用法将是：

const Hoc = withAuth(MyExistingComponent);
...
render() {
    return <Hoc {...props} />
}

基类是一种替代方法，但很快就会失去焦点并成为一般共享逻辑的转储。我认为 HOC 更干净。