ReactJS从一个模块导出const和组件

Question

我有两个模块，我想共享一个const数组。 这些模块之一包括const阵列和组件，而另一个模块仅包括组件。

这就是我在模块“A”中所拥有的。

export const ORDER_COLUMNS = [
  { name: 'orderNumber', title: 'Order', width: '10%',  type: 'string' },
  { name: 'orderType', title: 'Type', width: '10%',  type: 'string' }
];

class OrderGridControl extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
        orderColumns: ORDER_COLUMNS
    };
  }
  ...

}

export default OrderGridControl;

在模块“B”中。

import {OrderGridControl, ORDER_COLUMNS} from 'component/order-grid-control';

class OrderQueryPage extends React.Component {
      constructor(props) {
    super(props);
    this.state = {
        orderColumns: ORDER_COLUMNS
    };
    console.info(this.state.orderColumns);
  }

  ...

  render() {
    return (
      <div>
        <PropertyGrid gridSetup={this.state.orderColumns} />
      </div>
    );
  }
}

当我运行这个时，我得到以下错误。 invariant.js:39 Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method of 'moduleB'.

但是， console.info(this.state.orderColumns)行记录了我期望的所有列对象。

有趣的是，如果我将数组复制到模块“B”并在构造函数中分配列完全相同的方式。 当我从其他模块导入时，它似乎只是一个问题。

Answer 1

你几乎没有 - 你正在导出默认导出（ OrderGridControl ）和命名导出（ ORDER_COLUMNS ）。

但是，在B.js中，您尝试导入两个命名导出。

将导入修改为如下所示：

import OrderGridControl, { ORDER_COLUMNS } from 'component/order-grid-control';

具有默认导出的优点是，在导入时不必完全匹配其名称，因此您可以执行类似的操作

import GridControl, { ORDER_COLUMNS } from 'component/order-grid-control';