React+TypeScript报错：'Login'无法作为JSX组件 返回void类型无效如何解决

• 核心错误：你将组件需要渲染的JSX结构，错误写在了handleChange输入框变更事件的处理函数内部，Login组件本身没有返回任何内容，TypeScript自动推断Login的返回类型为void，和JSX组件要求返回合法JSX元素的规则冲突，所以抛出了对应报错。
• 额外逻辑问题：handleChange作为事件处理函数，不需要返回JSX结构，你原有代码里把UI代码放在这里不符合React组件的编写逻辑。

调整代码结构，把JSX返回逻辑移到Login组件的顶层作用域，仅在handleChange中保留状态更新逻辑即可，修复后的完整代码如下：

import React, { useState } from "react";
import { createUseStyles } from "react-jss";
import logo from "../../assets/logo.png";
const useStyles = createUseStyles({
    wrapper: {
        margin: "0",
        padding: "0",
        display: "flex",
        flexDirection: "column",
        justifyContent: "center",
        alignItems: "center",
        height: "100vh",
        backgroundColor: "#d0d0d0",
    },
    headline: {
        display: "flex",
        flexDirection: "column",
        justifyContent: "center",
        alignItems: "center",
        backgroundColor: "#d0d0d0",
    },
    loginForm: {
        width: "400px",
        backgroundColor: "#fff",
        padding: "20px",
        borderRadius: "10px",
    },
    form: {
        display: "flex",
        flexDirection: "column",
        justifyContent: "center",
        alignItems: "center",
    },
    label: {
        margin: "10px",
        fontSize: "20px",
        fontWeight: "bold",
    },
    username: {
        width: "90%",
        padding: "10px",
        margin: "10px",
        borderRadius: "5px",
        border: "1px solid #d0d0d0",
    },
    primary: {
        width: "90%",
        padding: "10px",
        margin: "10px",
        borderRadius: "5px",
        border: "1px solid #d0d0d0",
        backgroundColor: "#00a8ff",
        color: "#fff",
        fontWeight: "bold",
    },
    paragraph: {
        margin: "5px",
        fontSize: "16px",
        fontWeight: "bold",
    },
    logo: {
        width: "100px",
        height: "60px",
        alignSelf: "center",
        alignItems: "center",
        justifyContent: "center",
    },
    support: {
        display: "flex",
        flexDirection: "column",
        color: "#717171",
        fontSize: "12px",
    },
});

// props参数命名调整为通用规范命名，any类型不影响正常运行
const Login = (props: any) => {
    const classes = useStyles();

    const [user, setuser] = useState({
        fullname: "",
        email: "",
        username: "",
        password: "",
        retypepassword: "",
    });

    const handleClick = (e: any) => {
        e.preventDefault();
        alert("Successful");
    };

    // handleChange仅保留状态更新逻辑
    const handleChange = (e: any) => {
        const { name, value } = e.target;
        setuser({
            ...user,
            [name]: value
        })
    }

    // JSX结构移到Login组件顶层直接返回
    return (
        <div className={classes.wrapper}>
            {console.log("User", user)}
            <div className={classes.headline}>
                <img src={logo} alt="logo" className={classes.logo} />
                <h1>St. Lawrence Library Management System</h1>

            </div>
            <div className={classes.loginForm}>
                <form className={classes.form}>
                    <div className="form-group">
                        <label htmlFor="username" className={classes.label}>
                            Username
                        </label>
                        <input
                            type="text"
                            name="username"
                            className={classes.username}
                            value={user.username}
                            placeholder="Enter username"
                            onChange={handleChange}
                        />
                        <label htmlFor="password" className={classes.label}>
                            Password
                        </label>
                        <input
                            type="password"
                            name="password"
                            className={classes.username}
                            value={user.password}
                            placeholder="Enter password"
                            onChange={handleChange}
                        />
                    </div>
                    <button className={classes.primary} onClick={handleClick}>
                        Login
                    </button>
                    <p className={classes.paragraph}>Want to add another admin?</p>
                    <button className={classes.primary}>
                        Add Admin
                    </button>
                </form>
            </div>
            <div className={classes.support}>
                <p>Supported by St. Lawrence College</p>
            </div>
        </div>
    );
}

export default Login;

内容的提问来源于stack exchange，提问作者Nitesh Raj Khanal