Question

我有很多组件都有这些

这样的方法

class Header extends Component {

  sidebarToggle(e) {
    e.preventDefault();
    document.body.classList.toggle('sidebar-hidden');
  }

  sidebarMinimize(e) {
    e.preventDefault();
    document.body.classList.toggle('sidebar-minimized');
  }
}

我想将此重复代码移至

等功能

function toggleBodyClass(className, e) {
  e.preventDefault();
  document.body.classList.toggle('sidebar-mobile-show');
}

然后重构上面的函数

  sidebarMinimize(e) {
    toggleBodyClass('sidebar-minimized', e);
  }

在过去，我会使用mixin，但React文档现在不鼓励使用它。

我应该将此函数放在常规JavaScript模块中并将其导入组件模块中，还是有一个特定的React构造用于跨组件重用代码？

Answer 1

您可以使用这些功能制作High Order Component：

import React, { Component } from 'react';

export default function(ComposedComponent) {
  return class ExampleHOC extends Component {
    sidebarToggle(e) {
      e.preventDefault();
      document.body.classList.toggle('sidebar-hidden');
    }

    sidebarMinimize(e) {
      e.preventDefault();
      document.body.classList.toggle('sidebar-minimized');
    }

    render()
      return <ComposedComponent { ...this.props } />;
    }
  }  
}

然后通过将它们包装在HOC中来获取您想要增加的任何组件：

ExampleHOC(Header);

Answer 2

我应该将此函数放在常规JavaScript模块中并将其导入组件模块

是。这将是在JavaScript文件之间共享代码的非常标准的方法。我不相信你需要或者应该做任何与React相关的事情。

但，重要的是要了解您不应直接与React组件中的DOM 曾经进行交互。感谢@ShubhamKhatri的领导。

Answer 3

在我看来，将函数放在常规JavaScript模块中并将其导入组件模块是正确的。

因为典型的答案OOP答案是创建另一个类，扩展React.Component添加该函数。然后扩展该类，以便您创建的每个组件都具有该功能，但React不希望这样。

我相信，有一点可以证明你是对的。

https://reactjs.org/docs/composition-vs-inheritance.html

Answer 4

内在解决您的问题，创建扩展Component的新类并从新类扩展到共享功能并减少代码

class SuperComponent extends Component
{
    sidebarToggle(e) {
        e.preventDefault();
        document.body.classList.toggle('sidebar-hidden');
      }

      sidebarMinimize(e) {
        e.preventDefault();
        document.body.classList.toggle('sidebar-minimized');
      }    
}

---------------------------------------------------------------------

class Home extends SuperComponent
{
    someMethod()
    {
        this.sidebarMinimize();
    }
}

class Main extends SuperComponent
{
    someMethod()
    {
        this.sidebarToggle();
    }
}

其他解决方案

创建utils类并在组件中使用它

class UIUtiles
{
    static sidebarToggle(e) {
        e.preventDefault();
        document.body.classList.toggle('sidebar-hidden');
    }

    static sidebarMinimize(e) {
        e.preventDefault();
        document.body.classList.toggle('sidebar-minimized');
    }

}

class Home extends SuperComponent {
    someMethod(e) {
        UIUtiles.sidebarToggle(e);
        UIUtiles.sidebarMinimize(e);
    }
}

在React组件中重用代码

4 个答案:

其他解决方案