Реакт не может деконструировать restProps в Edge - PullRequest
Новая
       37

Реакт не может деконструировать restProps в Edge

1 голос
/ 26 февраля 2020

У меня есть проблема, и почему-то я просто не могу ее решить. Я пробовал все в течение нескольких часов, но я просто не могу найти решение. Он работал в старых проектах, но не работает с новым реактивным проектом, созданным с помощью create-реагировать-приложение.

Рассмотрим следующий код:

Приложение. js: 

function App() {
  const test = {
    test1: {},
    test2: {}
  };
    return (
        <div className="App">
            Cool!
          <Test
            name1="cool1"
            {...test}
          />
        </div>
    );
}

export default App;

Ничего большого здесь. Если я запускаю проект с npm start, все работает как положено, и я вижу «Круто!» в браузере. (Test определен ниже, это простой компонент, который возвращает div.)

Теперь, если я попытаюсь использовать ...props в параметрах моей функции для Test, например: 

export const Test = ({name1, ...props}) => {
    return (
        <div>yay! {props.name1}</div>
    )
};

Он отлично работает в chrome, но Microsoft говорит:

SCRIPT1028: SCRIPT1028: Ожидаемый идентификатор, строка или число

Я использую этот синтаксис в старых проектах, созданный со старой версией create-реагировать-приложение без проблем, поэтому я не слишком уверен, где проблема. Может ли это быть общей ошибкой в ​​приложении create-реагировать на приложения, поскольку проект буквально создан с ним и к нему не добавлены библиотеки.

С наилучшими пожеланиями и спасибо за любую помощь!

1 Ответ

2 голосов
/ 27 февраля 2020

Пройдя поиск некоторое время, я нашел решение проблемы. Работает без извлечения.

Проблема и способ, которым я нашел решение:

В какой-то момент в прошлом реакция решила удалить некоторые предустановки babel из предустановок реагирующих приложений. Я сравнил «babel-preset-реакции-приложение» (папка внутри node_modules) из более старого проекта с babel-presets из недавно созданного приложения реакции (созданного с помощью create-реагировать-приложение v3.4). Сравнивая пакет. json из приложения babel-preset-Reaction-app из обоих приложений, я обнаружил, что в более новой версии установлено гораздо меньше плагинов babel.

Решение: Установите @ babel / plugin-offer-object-rest-spread (и, может быть, также @ babel / plugin-transform-spread, чтобы быть уверенным), выполнив: 

npm install @babel/plugin-proposal-object-rest-spread @babel/plugin-transform-spread

После того, как все сделано, просто добавьте их как плагины внутри пакета. json вашего приложения реакции, ниже импортированных предустановок от реакции: 

"babel": {
    "presets": [ // This line should already be there if you created your project with CRA
      "react-app"
    ],
    "plugins": [
      "@babel/plugin-transform-spread",
      "@babel/plugin-proposal-object-rest-spread"
    ]
  }

Надеюсь, это помогло!

...