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

Question

首先，我想说我对 React 世界很陌生。我在我们的项目中使用了来自 github 的 React 组件。我注意到该组件在其代码中使用了装饰器。而且，要按原样使用该代码，我认为我们必须弹出并使用babel。但是，我们不想这样做，所以我计划用 native 代码删除装饰器(多个)。

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

这样做时我收到错误“在“recompose”中找不到导出“default”(导入为“compose”)

这让我想知道，我需要使用recompose吗？或者，有其他更简单的方法吗？不知道如何更换这 block 。

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

如有任何帮助，我们将不胜感激。我不确定我是否向您提供了足够的信息来帮助您。

Answer 1

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

import { compose } from 'recompose';

您还可以链式装饰您的组件来完成此操作，而无需重组(对语法不是100%确定):

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