javascript - 跨 React 组件重用代码

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);