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

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

这就是我在模块“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”中，并且在构造函数中分配列的方式与它的工作方式完全相同。当我从其他模块导入时，它似乎只是一个问题。

来源

2016-04-15 energ1ser

你明白了 - 你正在输出一个默认输出（OrderGridControl）和一个命名输出（ORDER_COLUMNS）。

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

修改您的进口看起来像这样：

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

有一个默认的导出的优点是，你不必进口，当它完全符合它的名字，所以你可以做类似

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

来源

2016-04-15 01:00:04 Interrobang

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

回答

相关问题