React项目TaskForm组件报'return outside of function'错误求助

下面是几个针对性的解决方向：

• 修正组件命名规范：React强制要求组件名称首字母大写，你的代码里组件定义为Taskform（小写f），会被React识别成普通HTML标签，进而引发解析错误。把组件名改成TaskForm即可：

export default function TaskForm ({onAdd}) {
  // 其余代码保持不变
}

• 检查文件后缀：确认组件文件的后缀是.jsx（不是.js）。不少React项目的配置里，只有.jsx/.tsx文件会被正确解析JSX语法，.js文件里的JSX会被当作普通JS处理，导致语法解析异常，触发return outside of function错误。

• 排查隐形语法问题：如果上面两步做完还报错，可能是代码里藏了隐形字符（比如不可见的空格、换行）或者细微的语法遗漏。可以试试：

  • 手动重写return语句及内部的JSX代码块
  • 用ESLint这类工具扫描代码，找出潜在的语法问题

修正后的完整代码 #

import { useState } from "react";

export default function TaskForm ({onAdd}) {
  const [text, setText] = useState("");

  const formEnviado = (e) => {
    e.preventDefault();

    if (text.trim()) {
      onAdd(text);
      setText("");
    }
  };

  return (
    <form onSubmit={formEnviado}>
      <input
        type="text"
        placeholder="Digite sua tarefa"
        value={text}
        onChange={(e) => setText(e.target.value)}
      />
      <button type="submit"> Adicionar Tarefa </button>
    </form>
  );
}

内容的提问来源于stack exchange，提问作者Erick Abraao