Reactjs 使用箭头语法的无状态函数中出现意外的令牌语法错误

以下是错误消息：

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 | };

这是一个没有无状态函数或箭头语法的组件，工作正常：

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 });

从“React”导入React；
从“react css模块”导入css模块；
从“/Icon.css”导入样式；
类图标扩展了React.Component{
静态defaultProps={
组件：“span”，
};
/**
*渲染组件
*@return{object}
*/
render（）{
常数{
组成部分，
名称
类名，
风格
onClick，
}=这是道具；
让classNames=`icon-${name}`；
if（类名）{
classNames=`${classNames}${className}`；
}
返回；
}
}
Icon.propTypes={
名称：React.PropTypes.string.isRequired，
类名：React.PropTypes.string，
onClick:React.PropTypes.func，
组件：React.PropTypes.oneOfType（[React.PropTypes.string，React.PropTypes.func]），
样式：React.PropTypes.object，
};
导出默认CSSModules（图标、样式，{allowMultiple:true，errorWhenNotFound:false}）；

---

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

我认为是

props.component

导致了这一问题，而不是箭头函数语法。这也是错误指示的内容

例如，在我的一个应用程序中，这很好：

返回

但这会产生一个相同的错误：

return <{'About'} />

返回

错误：

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

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

SyntaxError:/src/components/application.js:意外标记（89:16）
88 |案例“关于”：
>89 |返回；
|                 ^

---

除非我缺少一个使用场景，这是绝对可能的。不过，测试很容易-如果您导入一个希望在JSX中呈现并使用的组件而不是

{props.component}

，会发生什么情况？

我认为是

props.component

导致了这种情况，而不是箭头函数语法。这也是错误指示的内容

例如，在我的一个应用程序中，这很好：

返回

但这会产生一个相同的错误：

return <{'About'} />

返回

错误：

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

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

SyntaxError:/src/components/application.js:意外标记（89:16）
88 |案例“关于”：
>89 |返回；
|                 ^

---

除非我缺少一个使用场景，这是绝对可能的。不过，测试很容易-如果您导入一个希望在JSX中呈现并使用的组件，而不是

{props.component}

，会发生什么情况？

您只需要复制之前所做的

const component=props.component

然后执行

---

React通过检查元素是否大写来区分组件和html。在您的情况下，因为您只是在做`，所以只需要复制之前所做的

const Component=props.Component

然后执行

---

React通过检查元素是否大写来区分组件和html。在您的情况下，因为您只是在做`语法乍一看是正确的…您是否检查过，以确保在JSX中使用这样的

{props.component}

是有效的？我不知道这不是，只是以前没见过。我将签入我的一个应用程序。我想是的，我在其他工作正常的组件中使用了它，但不知何故，我在这个应用程序中犯了一个错误。props.component应该是什么？我的理解是，你将一个组件传递到道具中，然后将所有其他道具绑定到该组件中。但是我可能读错了，它表示html标记或其他组件，在本例中，默认情况下，

span

命名不好，但一旦解决了问题，我会修复它。您不能使用

{…}

计算组件名。请参阅规范：。语法乍一看是正确的……您是否检查过在JSX中使用

{props.component}

是否有效？我不知道这不是，只是以前没见过。我将签入我的一个应用程序。我想是的，我在其他工作正常的组件中使用了它，但不知何故，我在这个应用程序中犯了一个错误。props.component应该是什么？我的理解是，你将一个组件传递到道具中，然后将所有其他道具绑定到该组件中。但是我可能读错了，它表示html标记或其他组件，在本例中，默认情况下，

span

命名不好，但一旦解决了问题，我会修复它。您不能使用

{…}

计算组件名。请参阅规范：。在您的示例中，

About

表示字符串，在我的示例中，它表示一个prop值，我更新了显示相同代码的问题，但没有使用无状态函数或箭头语法，它工作正常（即使用大括号）。在您的示例中，

About

表示字符串，在我的示例中，它表示一个prop值，我已经更新了显示相同代码的问题，没有使用无状态函数或箭头语法，它工作正常（即使用大括号）。此解决方案工作正常。我想如果你有机会知道这是在哪里记录的，并发布链接，那将更加有用，无论如何，谢谢！这一部分已经详细讨论过了。除了这个答案之外，您可以在函数定义中提取变量的道具，如so

const Icon=（{name，className，onClick，Component，style}）=>

只要记住在道具中大写

组件，尽管这个解决方案很好。我想如果你有机会知道这是在哪里记录的，并发布链接，那将更加有用，无论如何，谢谢！这一部分已经详细讨论过了。除了这个答案之外，您还可以在函数定义中为变量提取props，比如so
const-Icon=（{name，className，onClick，Component，style}）=>
只需记住在props中将
组件
大写即可