Kompilierungsfehler: Pfeilfunktionen müssen als Modulstandard exportiert werden, bevor sie Variablen zugewiesen werden

Question

Beim Kompilieren ist folgender Fehler aufgetreten:

Während der Kompilierung ist eine Warnung aufgetreten.

src/Task.js

Zeile 4, erstes Zeichen: Weisen Sie die Pfeilfunktion einer Variablen zu und exportieren Sie sie dann als Standardwert des Moduls import/no-anonymous-default-export</ pre> ;
<p>src/TaskList.js</p>
<pre class="brush:php;toolbar:false;">Zeile 4, erstes Zeichen: Weisen Sie die Pfeilfunktion einer Variablen zu und exportieren Sie sie dann als Standardwert des Moduls import/no-anonymous-default-export</ pre> ;
<p>Das Folgende ist meine JS-Datei:</p>
<p>Task.js</p>
<pre class="brush:php;toolbar:false;">import React from 'react';
TaskList aus './TaskList' importieren;

export default ({Task}) =>
    zurückkehren (
        <p>
            {TaskList.description}
        </p>
    );
}

TaskList.js

import React from 'react';
Aufgabe aus './Task.js' importieren

export default ({ task }) =>
    zurückkehren (
        <ul className="list-group">
            {tasks.map(task => (
                <li key={task.id} className ="list-group-item">
                    <Aufgabe task={task} />
                </li>
            ))}
      </ul>
    );
}

Ich habe gerade angefangen, React und JavaScript zu lernen.

Answer 1

对于箭头函数，由于它们是匿名的，您需要将其赋值给一个变量，然后再导出。根据您的代码，这个例子应该可以工作（但不要忘记在tasks.map函数中填写逻辑）

import React from 'react';
import TaskList from './TaskList';

const Tasks = ({ tasks }) => {
  return tasks.map(task => ( ... ));
} 

export default Tasks;

这是由于import/no-anonymous-default-export规则引起的，该规则防止模块的默认导出未命名。

由于这只是一个lint警告，而不是语法错误，如果您禁用了该规则，您现有的代码将可以工作（但我建议不要这样做！）。

这个规则很有用，因为确保默认导出的命名有助于通过鼓励在声明位置和导入位置重复使用相同的标识符来提高代码库的可搜索性。