无法导出 const 箭头函数

ES6 新手，我试图制作一个像这样的 React 简单功能组件

// ./Todo.jsx

    export default const Todo = ({
      todos,
      onTodoClick,
    }) => (
      <ul>
        {todos.map( (todo, i) =>
          <li key     = {i} 
              onClick = {() => onTodoClick(i) } 
              style   = {{textDecoration: todo.completed ? 'line-through': 'none' }}
              >
            {todo.text}
          </li>
        )}
      </ul>
    )

But

// Another file 
import Todo from './Todos.jsx';
console.log(Todo) // undefined

没有产生箭头函数。

但如果我在导出链接中省略“const todo =”部分，就像这样

    export default ({
      todos,
      onTodoClick,
    }) => (...)

就可以成功导入了。

这是为什么？

您试图同时导出默认值并声明变量，这是无效的语法。

请考虑以下情况，因为我们知道您可以仅使用关键字的一个实例来声明多个变量，var a, b, c;出口定义根本没有意义。

export default var a, b, c;

那意味着什么？什么会被出口？

此外，使用export default语法已经创建了一个名为的变量default需要包含一个值或引用。

如果您想使其成为常量，请导出该变量。

const Todo = () => {};

export default Todo;

有一个在 ESDiscuss 上讨论此问题 https://esdiscuss.org/topic/why-is-export-default-var-a-1-invalid-syntax