Reactjs returns 带有下拉菜单记录的错误意外标记

Question

我知道有人问过这个问题，但我很沮丧。 Reactjs 在下面的代码行中将 = 标记为 unexpected token error

  handleChange1 = {(selectedOption) => {

已安装所有必需的依赖项。

下面是完整的代码

  import React, { Component } from 'react';
    import { render } from 'react-dom';
    import { Link } from 'react-router-dom';
    import { connect } from 'react-redux';

    import Hello from './Hello';
    import Select from 'react-select'
    //import './style.css';
    import 'react-select/dist/react-select.css';

    class Plans extends Component {
      constructor() {
        super();
        this.state = {
          name: 'React',
          selectedOption: {},
          selectedOption2: {}
        };
      }

      handleChange1 = {(selectedOption) => {
        this.setState({selectedOption});
    }
      };

      handleChange2 = (selectedOption) => {
        this.setState({selectedOption2: selectedOption})
      }

      render() {
        const options1 = [
          {value: 'one', label: 'One'},
          {value: 'two', label: 'Two'}
        ];

        const options2 = [
          {value: 'one-a', label: 'One A', link: 'one'},
          {value: 'one-b', label: 'One B', link: 'one'},
          {value: 'two-a', label: 'Two A', link: 'two'},
          {value: 'two-b', label: 'Two B', link: 'two'}
        ];

        const filteredOptions = options2.filter((o) => o.link === this.state.selectedOption.value)

        return (
          <div>
            <p>Select one first</p>
            <Select
              name="form-field-name"
              value={this.state.selectedOption.value}
              onChange={this.handleChange1}
              options={options1}
            />
            <p>Then the other</p>
            <Select
              name="form-field-name"
              value={this.state.selectedOption2.value}
              onChange={this.handleChange2}
              options={filteredOptions}
            />
          </div>
        );
      }
    }

    //render(<Plans />, document.getElementById('app'));


    function mapStateToProps(state) {

}



    const connectedPlans = connect(mapStateToProps)(Plans);
    export { connectedPlans as Plans };

这是我的package.json

{
  "name": "example",
  "version": "1.0.0",
  "repository": {
    "type": "git",
    "url": ""
  },
  "license": "MIT",
  "scripts": {
    "start": "webpack-dev-server --open"
  },
  "dependencies": {
    "history": "^4.6.3",
    "node-sass": "^4.9.4",
    "react": "^16.0.0",
    "react-dom": "^16.0.0",
    "react-redux": "^5.0.5",
    "react-router-dom": "^4.1.2",
    "react-select": "^2.1.1",
    "react-toastify": "^4.4.0",
    "redux": "^3.7.2",
    "redux-logger": "^3.0.6",
    "redux-thunk": "^2.2.0"
  },
  "devDependencies": {
    "babel-core": "^6.21.0",
    "babel-loader": "^7.1.2",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-react": "^6.16.0",
    "babel-preset-stage-3": "^6.24.1",
    "css-loader": "^1.0.1",
    "html-webpack-plugin": "^2.26.0",
    "path": "^0.12.7",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "webpack": "^3.6.0",
    "webpack-dev-server": "^2.8.2"
  }
}

更新

App.jsx

import React from 'react';
import { Router, Route } from 'react-router-dom';
import { connect } from 'react-redux';

import { history } from '../_helpers';
import { alertActions } from '../_actions';
import { PrivateRoute } from '../_components';

import { Plans } from '../Plans';

class App extends React.Component {
    constructor(props) {
        super(props);

        const { dispatch } = this.props;
        history.listen((location, action) => {
            // clear alert on location change
            dispatch(alertActions.clear());
        });
    }

    render() {
        const { alert } = this.props;
        return (
            <div className="jumbotron">
                <div className="container">
                    <div className="col-sm-8 col-sm-offset-2">
                        {alert.message &&
                            <div className={`alert ${alert.type}`}>{alert.message}</div>
                        }
                        <Router history={history}>
                            <div>



<Route path="/plans" component={Plans} />
                            </div>
                        </Router>
                    </div>
                </div>
            </div>
        );
    }
}

function mapStateToProps(state) {
    const { alert } = state;
    return {
        alert
    };
}

const connectedApp = connect(mapStateToProps)(App);
export { connectedApp as App };

Answer 1

我是怎么解决这个问题的。首先，我在上面的评论中实施了由 Dacre 提供支持的解决方案。然后我发现 react-select.css' 文件不在 node_modules 所以我重新安装它至于让我导入它..

我在下面添加了这行代码

render(<Plans />, document.getElementById('app'));

然后删除下面的代码

 function mapStateToProps(state) {

}
    const connectedPlans = connect(mapStateToProps)(Plans);
    export { connectedPlans as Plans };

Reactjs returns 带有下拉菜单记录的错误意外标记

Reactjs returns error unexpected token with dropdown menu records

reactjs

react-select