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

ProgramBox

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

Post author:admin
Запись опубликована:16 февраля, 2023
Post category:Вопросы по программированию

#reactjs #ecmascript-6 #babeljs #stateless #arrow-functions

#reactjs #ecmascript-6 #babeljs #без состояния #функции со стрелками

Вопрос:

Вот сообщение об ошибке:

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

Я безуспешно перепробовал все связанные ответы, какие-либо предложения?

1. синтаксис на первый взгляд выглядит нормально… вы проверили, чтобы убедиться, что {props.component} подобное использование в JSX допустимо? Я не знаю, что это не так — просто не видел этого раньше. Я проверю одно из своих приложений.

2. Я думаю, что да, я использую его в других компонентах, которые работают нормально, но почему-то я допускаю ошибку в этом.

3. каким должен быть props.component? Насколько я понимаю, вы передаете компонент в props, а затем связываете все остальные props с этим компонентом. Но я мог бы прочитать это неправильно

4. Он представляет HTML-тег или другой компонент, в данном случае span по умолчанию именование не подходит, но я исправлю это, как только решу проблему

5. Вы не можете использовать {...} для вычисления имени компонента. Смотрите спецификацию: facebook.github.io/jsx .

Ответ №1:

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

а затем выполните <Component onClick={props.onClick} styleName={props.classNames} style={props.style} />

React отличает компоненты от html, проверяя, написан ли элемент с заглавной буквы. В вашем случае, поскольку вы просто выполняете `<{props.component}’, который react не будет воспринимать как компонент, и он также не будет знать, как его анализировать как html-элемент.

1. Это решение работало нормально. Я думаю, было бы еще полезнее, если бы вы случайно знали, где это задокументировано, и разместили ссылку, спасибо в любом случае!

2. facebook.github.io/react/docs/… это касается конкретно этой части

3. Добавляя к этому ответу, вы можете извлекать реквизиты для переменных в определении функции, например, так const Icon = ({name, className, onClick, Component, style}) => , что просто не забудьте использовать заглавные Component буквы в реквизитах

Ответ №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} ?

1. В вашем примере About представляет строку, в моем примере она представляет значение prop, я обновил вопрос, показывающий тот же код без использования функции без состояния или синтаксиса стрелки, и он работает нормально (то есть с использованием фигурных скобок).