react-script:转换第三方JSX文件

时间:2019-02-15 06:13:22

标签: reactjs react-scripts

我正在使用create-react-app开发应用程序,并使用未编译的第三方模块,将其中的JSX文件包含到我的项目中。

启动或构建时出现以下错误

.HandleTransientHttpError()

我的react应用程序没有弹出并且不想弹出。

不想从反应脚本中弹出

******.jsx
Module parse failed: Unexpected token (12:25)
You may need an appropriate loader to handle this file type.

示例代码 Libarary中的Link.jsx

******.jsx
Module parse failed: Unexpected token (12:25)
You may need an appropriate loader to handle this file type.

以上代码已发布到内部npm存储库中并在应用程序中使用

应用程序中的App.jsx

import React from 'react';
import { string } from 'prop-types';
import './Link.scss';

const STATUS = {
  HOVERED: 'hovered',
  NORMAL: 'normal',
};

class Link extends React.Component {
  constructor(props) {
    super(props);

    this.onMouseEnter = this.onMouseEnter.bind(this);
    this.onMouseLeave = this.onMouseLeave.bind(this);

    this.state = {
      className: STATUS.NORMAL,
    };
  }

  onMouseEnter() {
    this.setState({ className: STATUS.HOVERED });
  }

  onMouseLeave() {
    this.setState({ className: STATUS.NORMAL });
  }

  render() {
    const { className } = this.state;
    const { page, children } = this.props;

    return (
      <a
        className={className}
        href={page}
        onMouseEnter={this.onMouseEnter}
        onMouseLeave={this.onMouseLeave}
      >
        {children}
      </a>
    );
  }
}

Link.propTypes = {
  page: string,
  children: string,
};

Link.defaultProps = {
  page: '#',
  children: '',
};

export default Link;

App.jsx给出错误

1 个答案:

答案 0 :(得分:1)

在不弹出的情况下使用 monthly_val=df.groupby([months,'Place']).mean() Sentiment date Place 1 With_friends 44.000000 home 67.333333 2 School 28.500000 With_friends 53.000000 3 School 4.000000 时,您将对如何导入模块有一些限制。

如果它是您构建的自定义模块,则它必须位于 monthly_val.unstack() Sentiment Place School With_friends home date 1 NaN 65.0 67.0 2 30.5 14.5 NaN 3 74.0 NaN NaN 文件夹中,并使用相对于当前文件路径的路径导入它。例如:create-react-app

如果它来自您已经用srcimport MyComponent from './components/MyComponent添加的第三方依赖包(例如reactstrap@blueprintjs/core),则可以导入只需指定软件包名称即可。例如:npm

在您的情况下,听起来好像yarn文件夹中有一个子文件夹,该子文件夹用于您未使用import { Button } from 'reactstrap'或{{ 1}}。尽管我怀疑建议以这种方式使用第三方软件包,但我认为您有充分的理由这样做。

如果无法查看整个设置,建议您尝试以下解决方法:

  1. node_modules文件夹中,使用第三方软件包创建指向该文件夹的符号链接。例如(在项目的npm文件夹中):
yarn
  1. 然后,在您的src文件中,执行以下操作:
src

其他信息: