无法导出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,
    }) => (...)

它成功导入.

这是为什么？

Answer 1

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

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

export default var a, b, c;

那是什么意思？什么会出口？

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

如果要将变量设为常量,请导出变量.

const Todo = () => {};

export default Todo;

在ESDiscuss上有一个关于此的主题

Answer 2

箭头函数默认导出：

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

箭头函数命名导出：

1. 第一种方式

import React from 'react';

export const Body = () => (
    <div>This is my body</div>
);

2. 第二种方式

import React from 'react';

const Body = () => {
    return <div>This is my body</div>
};

export {Body};

您还可以在同一文件中使用 1 个默认导出和多个命名导出，请检查以下示例：

示例1：

import React from 'react';

const Body1 = () => {
    return <div>This is my body1</div>
};

const Body2 = () => {
    return <div>This is my body2</div>
};

export {Body1, Body2};

you can import by using below code.
import {Body1, Body2} from 'bodyComponentPath';

实施例2

import React from 'react';
const MainBody = () => {
    return <div>This is my MainBody</div>
};

const Body1 = () => {
    return <div>This is my body1</div>
};

const Body2 = () => {
    return <div>This is my body2</div>
};

export {Body1, Body2};
export default MainBody;

you can import by using below code.
import MainBody, {Body1, Body2} from 'bodyComponentPath';

/* 仅在大括号内使用命名导出组件 */

从'bodyComponentPath'导入MainBody，{Body1，Body2}；