Непредвиденная ошибка маркера синтаксиса в безгосударственной функции, используя стрелку синтаксис

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

Я не могу показаться, чтобы выяснить, как исправить эту ошибку синтаксиса в безгосударственном возврате функции, здесь код:

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

Вам просто нужно скопировать то, что вы делали раньше const Component = props.component

, а затем сделать <Component onClick={props.onClick} styleName={props.classNames} style={props.style} />

Реагировать отличает компоненты от HTML, проверив, чтобы увидеть, если этот элемент прописными буквами. В вашем случае, так как вы просто делаете `< {props.component} ', который реагирует обычно на то, чтобы быть компонентом, и он не знает, как анализировать его как элемент html.

Answer 2

Я думаю, что это props.component, а не синтаксис функции стрелки. Об этом свидетельствует и ошибка.

К примеру, в одном из моих приложений, это работает отлично:

return <About />;

Но это дает одинаковую ошибку:

return <{'About'} /> 

Ошибка:

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

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

Если не является использование сценарий, который я пропускаю, который, безусловно, возможно. Легко проверить, хотя - что произойдет, если вы импортируете компонент, который ожидаете сделать, и используете его в JSX вместо {props.component}?