Question

我有两个模块，我想共享一个const数组。其中一个模块包括const数组和一个组件，而另一个模块只包含一个组件。

这就是我在模块中所拥有的＆＃34; A＆＃34;。

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;

在模块＆＃34; B＆＃34;。

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)行会记录我期望的所有列对象。

有趣的是，如果我将数组复制到模块＆＃34; B＆＃34;并在构造函数中指定完全相同的列。当我从其他模块导入时，这似乎只是一个问题。

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

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

1 个答案: