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

首先，我想说我是一个很新的世界。我在我们的项目中使用了来自github的react组件。我注意到该组件在其代码中使用了decorators。而且，要按原样使用该代码，我认为我们必须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()
  }
}

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

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

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

最佳答案

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

import { compose } from 'recompose';

您还可以链式装饰组件以在不使用recompose的情况下进行装饰（语法不确定100％）：

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