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

你几乎没有 - 你正在导出一个默认的export(OrderGridControl)和一个命名的export(ORDER_COLUMNS).

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

将导入修改为如下所示:

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

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

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