传播操作员无法正常工作... this.state.attributes

时间:2018-08-16 06:24:42

标签: reactjs babel spread-syntax react-scripts

价差运算符不起作用

<button {...this.state.attributes}></button>

获取错误“此意外令牌”以下是我们使用过的package.json

       {
  "name": "@coreui/coreui-free-react-admin-template",
  "version": "2.0.5",
  "description": "CoreUI React Open Source Bootstrap 4 Admin Template",
  "license": "MIT",
  "private": true,
  "dependencies": {
    "@coreui/coreui": "^2.0.2",
    "@coreui/coreui-plugin-chartjs-custom-tooltips": "^1.2.0",
    "@coreui/icons": "0.2.0",
    "@coreui/react": "^2.0.4",
    "@rowno/sparkline": "^3.0.1",
    "all": "0.0.0",
    "availity-reactstrap-validation": "^2.0.2",
    "bootstrap": "^4.1.1",
    "chart.js": "^2.7.2",
    "classnames": "^2.2.6",
    "core-js": "^2.5.7",
    "enzyme": "^3.3.0",
    "enzyme-adapter-react-16": "^1.1.1",
    "flag-icon-css": "^3.0.0",
    "font-awesome": "^4.7.0",
    "prop-types": "^15.6.2",
    "react": "^16.4.1",
    "react-avatar": "^3.1.0",
    "react-bootstrap": "^0.32.1",
    "react-chartjs-2": "^2.7.2",
    "react-checkbox-group": "^4.0.1",
    "react-confirm-alert": "^2.0.5",
    "react-dom": "^16.4.1"
    "react-loadable": "^5.4.0",
    "react-loading": "^2.0.3",
    "react-redux": "^5.0.7"
    "react-render-html": "^0.6.0",
    "react-router-config": "^1.0.0-beta.4",
    "react-router-dom": "^4.3.1",
    "react-sortable-pane": "^1.0.2",
    "react-sparklines": "^1.7.0",
    "react-spinners": "^0.3.2",
    "react-stepzilla": "^4.7.2",
    "react-switch": "^3.0.4",
    "react-table": "^6.8.6",
    "react-tabs": "^2.2.2",
    "react-test-renderer": "^16.4.1",
    "react-timekeeper": "^1.0.7",
    "react-toastify": "^4.1.0",
    "reactstrap": "^6.1.0"
    "redux": "^4.0.0",
    "redux-thunk": "^2.3.0"
  },
  "devDependencies": {
    "babel-jest": "^23.0.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "node-sass-chokidar": "^1.3.0",
    "npm-run-all": "^4.1.3",
    "react-scripts": "^1.1.4"
  },
  "scripts": {
    "build-css": "node-sass-chokidar --include-path ./node_modules ./src/scss -o ./src/scss",
    "watch-css": "npm run build-css && node-sass-chokidar --include-path ./node_modules ./src/scss -o ./src/scss --watch --recursive",
    "start-js": "react-scripts start",
    "start": "npm-run-all -p watch-css start-js",
    "build-js": "react-scripts build",
    "build": "npm-run-all build-css build-js",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "babel": {
    "presets": [
      "es2015",
      "react",
      "stage-0"
    ]
  },
  "bugs": {
    "url": "https://github.com/coreui/coreui-free-react-admin-template/issues"
  }
}

我们尝试了不同的插件,但是没有运气。 变换对象剩余传播 出现运行时错误。 我们必须动态更新按钮属性,并且散布运算符是唯一的选择。

enter image description here

1 个答案:

答案 0 :(得分:0)

您需要为此安装babel插件。我估计不安装preset-es2015,而是安装babel-preset-env,它们一起作为(es2015,es2016,es2017)使用。

以防万一,the plugin是您所需的扩展操作符。