javascript - ReactJS 从一个模块导出常量和组件

Question

我有两个模块想共享一个 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) 但得到:未定义。检查“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';