Question

我有一个函数，它将一个组件作为参数，并返回另一个增强组件：

import React from 'react';
import { compose } from 'recompose';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
import { Layout, DarkBar } from 'SharedComponents/Layouts';


const myCreationFunction = ({
  component,
}) => {
  const Route = (props) => {
    // Some code here 
    return (
      <Layout>
          <div><Link to={props.path}>LinkTitleHere</Link></div>
          {React.createElement(component, {
            ...props,
            ...someOtherPropsHere,
          })}
      </Layout>
    );
  }; // The error points here

  const mapStateToProps = () => ({});
  const enhance = compose(
    connect(mapStateToProps, someActionsHere),
  )(Route);

  return enhance;
};

我以这种方式调用该函数：

import MyComponent from './MyComponent';
import myCreationFunction from './HOC/myCreationFunction';

const Route = myCreationFunction({
  component: MyComponent,
});

当我在开发模式下运行它时，它运行顺利。但是当尝试使用npm run build构建应用程序并通过webpack时，我得到：

Module parse failed: Unexpected token (35:47)
You may need an appropriate loader to handle this file type.
| function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
| 
> var createListRoute = function myCreationFunction((_temp = _ref, _ref2 = <_Layouts.DarkBar>
|           <_Breadcrumbs2.default />
|           <_Layouts.RoundAddButton path={addPath} color="white" />

我做错了什么？

编辑＃1

<Link>似乎导致了问题。删除它修复了问题。此外，在尝试使用a标记替换它时，我遇到了同样的问题。怪异。

编辑＃2

由于时间不够，我没有解决这个问题。我尝试了1小时没有任何进展，并决定使用button代码和使用onClick的{{1}}方法推送新网址。

我真的很奇怪，history或Link标记可能会在构建过程中破坏某些内容。我肯定会在一些空闲时间深入研究它。

将组件作为函数参数传递

0 个答案: