Question

首先，我想说我对世界的反应非常新。我在我们的项目中使用来自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);

任何帮助将不胜感激。我不确定我是否已经提供足够的信息来帮助你。

Answer 1

您的错误是recompose默认情况下不导出任何内容，因此导入错误，您应该导入compose，如下所示：

import { compose } from 'recompose';

您也可以在没有recompose的情况下对您的组件进行链式装饰（不是100％确定语法）：

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

JavaScript：从create-react-app

1 个答案: