JavaScript：从create-react-app中删除装饰器

Question

首先，我想说我是一个很新的世界。 我在我们的项目中使用了来自github的react组件。 我注意到该组件在其代码中使用了decorators 。 而且， babel原样使用该代码，我认为我们必须eject并使用babel 。 但是，我们不想这样做，所以我打算用本机代码删除装饰器（多个）。

import React from 'react'
import dc from 'dc'
import BaseChart from './base-chart'
import coordinateGridMixin from '../mixins/coordinate-grid-mixin'
import stackMixin from '../mixins/stack-mixin'
import barMixin from '../mixins/bar-mixin'

@barMixin
@stackMixin
@coordinateGridMixin
export default class BarChart extends BaseChart{
  static displayName = 'BarChart'

  componentDidMount(){
    this.chart = dc.barChart(this.chart)
    this.configure()
    this.chart.render()
  }
}

在此页面的帮助下，我从以下代码开始。

import React from 'react'
import dc from 'dc'
import BaseChart from './base-chart'
import coordinateGridMixin from '../mixins/coordinate-grid-mixin'
import stackMixin from '../mixins/stack-mixin'
import barMixin from '../mixins/bar-mixin'
import compose from 'recompose'

class BarChart extends BaseChart {
  static displayName = 'BarChart'

  componentDidMount(){
    this.chart = dc.barChart(this.chart)
    this.configure()
    this.chart.render()
  }
}

export default compose(
  coordinateGridMixin,
  stackMixin,
  barMixin
)(BarChart);

这样做我得到一个错误"export 'default' (imported as 'compose') was not found in 'recompose'

这让我感到奇怪，我需要使用recompose吗？ 还是有另外一种更简单的方法？ 不确定如何更换这块。

export default ???(
  coordinateGridMixin,
  stackMixin,
  barMixin
)(BarChart);

任何帮助，将不胜感激。 我不确定是否已向您提供足够的信息以帮助您。

Answer 1

您的错误是关于recompose默认情况下不导出任何内容，因此您的导入不正确，您应该像这样导入compose ：

import { compose } from 'recompose';

您还可以链式修饰组件来完成它，而无需recompose （语法不十分确定）：

let decoratedBarChart = coordinateGridMixin(BarChart);
decoratedBarChart = stackMixin(decoratedBarChart);
decoratedBarChart = barMixin(decoratedBarChart);
export default decoratedBarChart;