无法导出 const 箭头函数答案

【问题标题】：cannot export const arrow function无法导出 const 箭头函数
【发布时间】：2016-01-08 12:17:59
【问题描述】：

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,
    }) => (...)

成功导入。

这是为什么呢？

【问题讨论】：

ES6 export default AssignmentExpression的可能重复

标签： ecmascript-6

【解决方案1】：

您正在尝试导出默认值并同时声明一个变量，这是无效的语法。

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

export default var a, b, c;

这意味着什么？什么会被导出？

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

如果您想将其设为常量，请改为导出该变量。

const Todo = () => {};

export default Todo;

有一个thread about this on ESDiscuss

【讨论】：

我明白了，但是 export class Todo extends Component {...} 不是变量的声明，而是一个有效的类，对吗？
是的，但是使用 class 关键字只是语法糖，无论如何你不能在同一个 go 中声明超过 1 个类。 class A, B, C 的语法有效。
谢谢一百万，这很有意义，关于你可以 var/const 多个东西的部分，而 export 不知道该做什么。
规范也有a useful table关于不同类型的允许export

【解决方案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.*/

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

【讨论】：