उपयोग घटक कनेक्ट() - संपत्ति 'DISPLAYNAME' पढ़ा नहीं जा सकता अपरिभाषित

Question

की मैं एक अजीब समारोह 'कनेक्ट' और एक प्रस्तुतिकरण घटक से संबंधित समस्या है

import React from 'react'; 
import { withRouter } from 'react-router'; 
import { connect } from 'react-redux'; 

import * as optionGroupActions from 'actions/optionGroupActions'; 
import OptionGroupForm from 'components/optionGroup/OptionGroupForm'; 

const mapDispatchToProps = (dispatch, ownProps) => { 
    return { 
    saveOptionGroup: (optionGroup) => { 
     dispatch(optionGroupActions.fetchSaveOptionGroup(optionGroup)); 
    }, 
    onClickCancel:() => { 
     ownProps.router.push('/product/options'); 
    } 
    }; 
}; 

const OptionGroupAddContainer = connect(
    null, 
    mapDispatchToProps 
)(OptionGroupForm); 

export default OptionGroupAddContainer; 

यह काम करता है लेकिन अगर मैं के साथ आयात को बदलने

connect.js:57Uncaught TypeError: Cannot read property 'displayName' of undefined 

घटकों/index.js की तरह दिखता है: इस

import { OptionGroupForm } from 'components’; 

मैं यह त्रुटि आई

import { OptionGroupForm } from './components’; 

Answer 1

अपने निर्माण की प्रक्रिया पर निर्भर करता है, तो आप एक NPM मॉड्यूल का नाम के बजाय एक रिश्तेदार पथ के रूप में इलाज किया जा क्रम स्रोत के लिए में इस तरह अपने आयात निर्दिष्ट करने के लिए आवश्यकता हो सकती है path चर को परिभाषित करने की तरह

नीचे

import { OptionGroupForm } from 'components’; 

आप अपने निर्माण प्रक्रिया कॉन्फ़िग फ़ाइल में resolve उपयोग करने के लिए करना चाहते हैं import ,

या आप कर सकते हैं बस import इसके नीचे

import { OptionGroupForm } from './components’; 

संपादित की तरह: अपने घटकों/index.js तरह

नीचे

import OptionGroupForm from './optionGroup/OptionGroupForm'; 

export { 
    OptionGroupForm 
}; 

Answer 2

यदि आप:

// OptionGroups 
import OptionGroupForm from 'components/optionGroup/OptionGroupForm'; 

export { 
    OptionGroupForm 
};