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從一個模塊導出常量和組件

回答

相關問題