Не может экспортировать функцию const arrow

new для 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,
    }) => (...)

Он успешно импортируется.

Почему это?

Ответ 1

Вы пытаетесь экспортировать значение по умолчанию и объявлять переменную одновременно, что является недопустимым синтаксисом.

Рассмотрим следующее, поскольку мы знаем, что вы можете объявлять несколько переменных, используя только один экземпляр ключевого слова, var a, b, c; определение экспорта не имеет смысла вообще.

export default var a, b, c;

Что это значит? Что будет экспортироваться?

Кроме того, использование синтаксиса export default уже создает переменную с именем default, которая должна содержать значение или ссылку.

Экспортируйте переменную вместо этого, если вы хотите сделать ее константой.

const Todo = () => {};

export default Todo;

Существует поток об этом в ESDiscuss