无法导出const箭头函数

Question

我对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>
    )

但是

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

未产生箭头函数。

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

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

它已经成功导入。

为什么会成功导入呢？

- Nik So

---

可能是 ES6 export default AssignmentExpression 的重复问题。 - Bergi

Answer 1

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

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

export default var a, b, c;

那意味着什么？会导出什么？

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

如果要将其作为常量，请导出该变量本身。

const Todo = () => {};

export default Todo;

ESDiscuss上有一个关于这个问题的帖子

- Henrik Andersson

---

我明白了，但是 export class Todo extends Component {...} 不被视为变量声明，而是一个类，这是有效的，对吗？ - Nik So

是的，但使用“class”关键字只是语法糖，而且您无论如何都不能在同一步骤中声明多个类。class A，B，C是无效的语法。 - Henrik Andersson

非常感谢，这很有道理。你可以使用var/const来定义多个变量，但是export不知道该如何处理。 - Nik So

该规范还包括一张有用的表格，列出了不同类型的允许使用的export。 - CodingIntrigue

Answer 2

看一下
箭头函数作为独立行导出：

import React from 'react';
const Body=()=>(
    <div>This is my body</div>
);
export default Body;

在这里，您可以在同一行中导出它

import React from 'react';
export const Body=()=>(
    <div>This is my body</div>
);

重要的是你必须使用以下代码导入这个箭头函数。

import {Body} form 'path';
 
/*use arrow function name inside the curly bracket only.*/ 

希望这能帮助您在同一行中导出箭头函数 :)

- Afroz Quraishi