cannot export const arrow function

new to ES6, I was trying to make a React simple functional component like this

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

But 

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

did not yield the arrow function.

but if I leave off the "const todo =" part in the export link, like so

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

It gets successfully imported.

Why is that?

71037 次浏览
小开
最佳答案

You're trying to export a default and declare a variable at the same time, which is invalid syntax.

Consider the following, since we know that you can declare multiple variables using only one instance of the keyword, var a, b, c; the export definition wouldn't make sense at all.

export default var a, b, c;

What would that mean? What would get exported?

Furthermore, using the export default syntax already creates a variable called default that needs to contain a value or reference.

Export the variable instead if you want to make it a constant.

const Todo = () => {};


export default Todo;

There is a thread about this on ESDiscuss

小开

Give it a look
Arrow function export as a separate line:

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

Here you can export it in the same line

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

The important thing is that you must import this arrow function by using below code

import {Body} form 'path';
 

/*use arrow function name inside the curly bracket only.*/

Hope this will help you to export your arrow function in the same line :)


提交答案