使用箭头语法的无状态函数中出现意外的标记语法错误

Question

错误信息如下：

SyntaxError: <local path>/Icon.jsx: Unexpected token (13:2)
  11 | 
  12 |   return (
> 13 |     <{props.component} onclick=props.onClick styleName=props.classNames style=props.style/>
     |      ^
  14 |   );
  15 | };

我似乎无法弄清楚如何修复无状态函数中的语法错误 return，这里是代码：

import React from 'react';
import CSSModules from 'react-css-modules';
import styles from './Icon.css';

const Icon = (props) => {
  let classNames = `icon-${props.name}`;

  if (props.className) {
    classNames = `${classNames} ${props.className}`;
  }

  return (
    <{props.component} onclick={props.onClick} styleName={props.classNames} style={props.style} />
  );
};    

Icon.propTypes = {
  name: React.PropTypes.string.isRequired,
  className: React.PropTypes.string,
  onClick: React.PropTypes.func,
  component: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.func]),
  style: React.PropTypes.object,
};

Icon.defaultProps = {
  component: 'span',
};

export default CSSModules(Icon, styles, { allowMultiple: true, errorWhenNotFound: false });

这里是 .babelrc 配置：

{
  "presets": [
    "es2015",
    "stage-0",
    "react"
  ],
  "plugins": [
    [
      "transform-runtime",
      "react-intl", {
        "messagesDir": "./build/messages",
        "enforceDescriptions": false
      }
    ]
  ]
}

这里是没有无状态函数或箭头语法但工作正常的完全相同的组件：

import React from 'react';
import CSSModules from 'react-css-modules';
import styles from './Icon.css';

class Icon extends React.Component {

  static defaultProps = {
    Component: 'span',
  };

  /**
   * render component
   * @return {object}
   */
  render() {
    const {
      Component,
      name,
      className,
      style,
      onClick,
    } = this.props;
    let classNames = `icon-${name}`;

    if (className) {
      classNames = `${classNames} ${className}`;
    }
    return <Component onClick={onClick} styleName={classNames} style={style} />;
  }
}

Icon.propTypes = {
  name: React.PropTypes.string.isRequired,
  className: React.PropTypes.string,
  onClick: React.PropTypes.func,
  Component: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.func]),
  style: React.PropTypes.object,
};


export default CSSModules(Icon, styles, { allowMultiple: true, errorWhenNotFound: false });

我已经尝试了所有相关的答案，但都没有成功，有什么建议吗？

Answer 1

我认为是 props.component 造成的，而不是箭头函数语法。这也是错误指示的内容。

例如，在我的一个应用程序中，它工作正常：

return <About />;

但这给出了相同的错误：

return <{'About'} />

错误：

SyntaxError: /src/components/application.js: Unexpected token (89:16)

  88 |       case 'about':
> 89 |         return <{'About'} />;
     |                 ^

除非有我遗漏的使用场景，那肯定是可以的。虽然易于测试 - 如果您导入一个您期望渲染的组件并在 JSX 中使用它而不是 {props.component}?

会发生什么

Answer 2

你只需要复制你之前所做的const Component = props.component

然后<Component onClick={props.onClick} styleName={props.classNames} style={props.style} />

React 通过检查元素是否大写来区分组件与 html。在你的情况下，因为你只是在做'<{props.component}'，它不会作为一个组件进行反应，它也不知道如何将它解析为一个html元素。

使用箭头语法的无状态函数中出现意外的标记语法错误

Unexpected token syntax error in a stateless function using arrow syntax

stateless

ecmascript-6

reactjs

babeljs

arrow-functions