反应，意外的令牌' - '

Question

这是我尝试使用webpack编译时得到的结果：

 ERROR  Failed to compile with 1 errors                                                                                                                         13:25:46

 error  in ./resources/assets/react/components/Navigation/Navbar.js

Syntax Error: Unexpected token (100:13)

   98 |         }
   99 |         className = "disabled dropdown-toggle"
> 100 |         data - toggle = "dropdown"
      |              ^
  101 |         role = "button"
  102 |         aria - expanded = "false" > Jobs < /a> <
  103 |         /li> <



 @ ./resources/assets/react/components/Navigation/Navigation.js 41:14-33
 @ multi ./resources/assets/react/components/Navigation/Navigation.js

这是我的package.json：

"devDependencies": {
        "axios": "0.16.2",
        "babel-preset-es2017": "6.24.1",
        "babel-preset-stage-0": "6.24.1",
        "babel-loader": "7.1.2",
        "babel-core": "6.26.0",
        "babel-plugin-transform-object-rest-spread": "6.23.0",
        "babel-plugin-dynamic-import-node": "1.0.2",
        "babel-plugin-syntax-dynamic-import": "6.18.0",
        "babel-plugin-transform-class-properties": "6.24.1",
        "babel-plugin-transform-react-constant-elements": "6.23.0",
        "babel-plugin-transform-react-jsx": "6.24.1",
        "babel-plugin-transform-react-jsx-self": "6.22.0",
        "babel-plugin-transform-react-jsx-source": "6.22.0",
        "babel-plugin-transform-regenerator": "6.24.1",
        "babel-plugin-transform-runtime": "6.23.0",
        "babel-preset-react": "6.24.1",
        "babel-preset-env": "1.6.1",

和我的babelrc：

{
    "presets": ["react", "env", "stage-0"],
    "plugins": [
        "transform-object-rest-spread",
        "dynamic-import-node",
        "syntax-dynamic-import",
        "transform-class-properties",
        "transform-object-rest-spread",
        "transform-react-constant-elements",
        "transform-react-jsx",
        "transform-react-jsx-self",
        "transform-react-jsx-source",
        "transform-regenerator",
        "transform-runtime"
    ],
    "comments": true
}

我需要做些什么才能让它发挥作用？我试图让它工作，但我不知道什么插件或预设缺少，以便它了解' - '应该做什么

Navbar.js：

import React from 'react'
import NavbarDropdown from './NavbarDropdown'

const Sidebar = (props) => {
  return (
    <div className={`sidebar ${props.open && 'open'}`} role="navigation" style={{ display: props.open && 'block' }}>
      <nav ref={props.setWrapperRef}>
        <h3 id="nav-title">Menu</h3>
        <ul className="nav navbar-nav">
          <li><img id="nav-logo" src="https://s3.eu-west-2.amazonaws.com/liveandnow-production/public/images/liveOldham.png" alt="LiveOldham" /></li>
          <li>
            <a href="https://app.liveoldham.com/entity">People &amp; Places</a>
          </li>
          <li>
            <a href="https://app.liveoldham.com/events">Events</a>
          </li>
          <hr className="nav-rule" />
          <NavbarDropdown label="Travel">
            <li>
              <a href="https://app.liveoldham.com/travel/tram">Tram</a>
            </li>
            <li>
              <a className="disabled" href="">Bus</a>
            </li>
            <li>
              <a className="disabled" href="">Train</a>
            </li>
          </NavbarDropdown>
          <NavbarDropdown label="News">
            <li>
              <a className="disabled" href="">Chronicle</a>
            </li>
            <li>
              <a className="disabled" href="">M.E.N.</a>
            </li>
            <li>
              <a className="disabled" href="">Rochdale Observer</a>
            </li>
            <li>
              <a className="disabled" href="">Middleton Guardian</a>
            </li>
          </NavbarDropdown>
          <NavbarDropdown label="Entertainment">
            <li>
              <a href="https://app.liveoldham.com/cinema/all">Cinema</a>
            </li>
            <li>
              <a className="disabled" href="">Theatre</a>
            </li>
            <li>
              <a className="disabled" href="">Gigs</a>
            </li>
          </NavbarDropdown>
          <li className="dropdown">
            <a href="" onClick={e => e.preventDefault()} className="disabled dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Jobs</a>
          </li>
          <li className="dropdown">
            <a href="" onClick={e => e.preventDefault()} className="disabled dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Properties</a>
          </li>
        </ul>
        <div className="footer">
          <div className="footer-links copyright">
            <p>Copyright© Live &amp; Now Limited - 2017</p>
            <ul>
              <li><a href="https://app.liveoldham.com/contact">Contact</a></li>
              |
              <li><a href="https://app.liveoldham.com/terms">Terms</a></li>
              |
              <li><a href="https://app.liveoldham.com/privacy">Privacy</a></li>
              |
              <li><a href="https://app.liveoldham.com/cookies">Cookie</a></li>
              |
              <li><a href="https://app.liveoldham.com/faqs">FAQs</a></li>
            </ul>
          </div>
          <div className="social-links">
            <a rel="nofollow noopener noreferrer" href="https://www.facebook.com/liveoldham/" target="_blank"><i className="fa fa-facebook-square fa-2x"></i></a>
            <a rel="nofollow noopener noreferrer" href="https://twitter.com/live_oldham" target="_blank"><i className="fa fa-twitter-square fa-2x"></i></a>
            <a rel="nofollow noopener noreferrer" href="https://www.instagram.com/live_oldham/" target="_blank"><i className="fa fa-instagram fa-2x"></i></a>
          </div>
        </div>
      </nav>
    </div>
  )
}

export default Sidebar

这是我的Navbar.js，以便您可以看到实际发生的事情