Question

我有一个与'connect'和一个表示组件

相关的奇怪问题

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;

这可行但是如果我用这个

更改导入

import { OptionGroupForm } from 'components’;

我收到了这个错误：

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

components / index.js看起来像

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

export {
  OptionGroupForm
};

Answer 1

如果你想import如下

import { OptionGroupForm } from 'components’;

您必须在构建过程配置文件中使用resolve来定义path变量，

或者你可以import就像下面那样

import { OptionGroupForm } from './components’;

编辑：您的组件/ index.js应如下所示

import OptionGroupForm from './optionGroup/OptionGroupForm';

export {
  OptionGroupForm
};

Answer 2

根据您的构建过程，您可能需要像这样指定导入，以便将源视为相对路径而不是npm模块名称：

import { OptionGroupForm } from './components’;

使用带connect（）的组件 - 无法读取属性＆＃39; displayName＆＃39;未定义的

2 个答案: