功能组件出现错误“无法编译意外令牌”答案

【问题标题】：Function component has error "Failed to compile Unexpected token"功能组件出现错误“无法编译意外令牌”
【发布时间】：2021-04-14 16:19:01
【问题描述】：

我有一个函数错误，这是代码：

import React, { useState } from "react";
import { CREATE_USER } from "../Graphql/Mutation";
import { useMutation } from "@apollo/client";

function CreateUser() {
    
  const [name, setName] = useState("");
  const [userName, setUserName] = useState("");
  const [password, setPassword] = useState("");

  const [createUser, { error }] = useMutation(CREATE_USER);

  return (
    <div className="createUser">
      <input
        type="text"
        placeholder="name"
        onChange={(event) => {
          setName(event.target.value);
        }}
      />
      <input
        type="text"
        placeholder="username"
        onChange={(event) => {
          setUserName(event.target.value);
        }}
      />
      <input
        type="text"
        placeholder="password"
        onChange={(event) => {
          setPassword(event.target.value);
        }}
      />
      <button
        onClick={() => {
          createUser({
            variables: {
              name: name,
              username: userName,
              password: password,
            },
          });
        }}
      >
        Create User
      </button>
    </div>
  );
}

export default CreateUser;

我遇到了这个错误：

Failed to compile
Unexpected token, expected "," (14:9)

  12 |
  13 |   return (
> 14 |     <div className="createUser">
     |          ^
  15 |       <input
  16 |         type="text"
  17 |         placeholder="name"

文件名是create.ts，你知道我做错了什么吗？？

我知道创建组件函数的表单是这样的：

函数名Function(){ 返回(

.....还有更多 ) }

导出默认名称函数；

我正在应用它，但不起作用

【问题讨论】：

标签： reactjs typescript graphql

【解决方案1】：

这似乎只是一个命名问题。使用 JSX 和 Typescript 的文件不能有 .ts 扩展名，因为普通 TS 无法处理它。重命名为create.tsx 应该可以解决问题=)

【讨论】：