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

成功导入。

为什么？

Answer 1

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

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

export default var a, b, c;

这意味着什么？什么会出口？

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

如果要将变量设为常量，请导出变量。

const Todo = () => {};

export default Todo;

有一个thread about this on ESDiscuss

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.*/

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

无法导出const箭头功能

2 个答案: