Reactjs React Redux@connect语法错误

我不熟悉使用React和Redux，我正在构建一个简单的todos应用程序。我正在使用命令行中的createreact应用程序工具编写应用程序

问题

import React, { Component } from 'react';
import { connect } from 'react-redux';

import Todos from './components/Todos';
import Todo from './components/Todo';

import './App.css';

@connect((store) => {
  return {
    user: store.user.user
  }
})
class App extends Component {
  constructor(){
    super()
    this.state = {
      name: 'Brad',
      todos: [
        {
          id: '001',
          name: 'Take out trash',
          completed: false
        },
        {
          id: '002',
          name: 'Meeting with boss',
          completed: false
        },
        {
          id: '003',
          name: 'Go out to dinner',
          completed: false
        }
      ]
    }
  }
  render() {
    return (
      <div className="App">
        <h1>Hello</h1>
        <Todos name={this.state.name} todos={this.state.todos}/>
        <Todo/>
      </div>
    );
  }
}

export default App;

我去了其他博客和帖子，其他人提到我缺少一个npm插件来转换装饰者“transform decorators legacy”，我将这个插件与Babel一起添加到我的依赖项中，但我仍然收到相同的错误

Syntax error: Unexpected token (9:0)

   7 | import './App.css';
   8 |
>  9 | @connect((store) => {
     | ^
  10 |   return {
  11 |     user: store.user.user
  12 |   }

我的代码

import React, { Component } from 'react';
import { connect } from 'react-redux';

import Todos from './components/Todos';
import Todo from './components/Todo';

import './App.css';

@connect((store) => {
  return {
    user: store.user.user
  }
})
class App extends Component {
  constructor(){
    super()
    this.state = {
      name: 'Brad',
      todos: [
        {
          id: '001',
          name: 'Take out trash',
          completed: false
        },
        {
          id: '002',
          name: 'Meeting with boss',
          completed: false
        },
        {
          id: '003',
          name: 'Go out to dinner',
          completed: false
        }
      ]
    }
  }
  render() {
    return (
      <div className="App">
        <h1>Hello</h1>
        <Todos name={this.state.name} todos={this.state.todos}/>
        <Todo/>
      </div>
    );
  }
}

export default App;

---

任何帮助/知识将不胜感激，谢谢

请注意，React和Redux团队通常都不鼓励使用装饰器。相反，在这种情况下，您应该使用

connect（）

作为函数：

export default connect(mapStateToProps, mapDispatchToProps)(MyComponent);

试着这样做：

const stateMap = (state) => {
    console.log('state', state);
    return {
        //something from state
    };
};

export default connect(stateMap)(App);

---

首先，我要指出，我同意@markerikson的回答，使用函数而不是decorator

但是，如果您确实想使用装饰器，那么还需要执行几个步骤。您已经将插件添加到依赖项中，但没有告诉巴贝尔使用它

---

创建React应用程序使用带有Babel的网页包，即React脚本。你需要调整巴别塔的配置。“创建React应用程序”的方法是从创建React应用程序，然后编辑.babelrc-请参见

当我使用此答案时，我发现此错误“export'default”（作为“connect”导入）未在“React-redux”中找到。是否使用花括号导入？从“React-redux”导入{connect}；很高兴提供帮助：）