React中signUpComponent未使用警告与按钮点击失效问题求助

你的两个问题根源一致，都是React自定义组件的命名规范导致的：

1. 核心问题：组件命名大小写错误 #

React规定自定义组件必须以大写字母开头，小写开头的元素会被识别为原生HTML标签，而非你导入的自定义组件。这直接引发了两个问题：

• TypeScript判定你导入的signUpComponent从未被实际使用（因为<signUpComponent/>被当成了HTML标签，和你导入的组件无关），所以抛出ts(6133)警告
• 点击按钮后状态确实切换了，但渲染的不是你的注册组件，因此看起来没有效果

修改后的完整代码：

import logo from './logo.svg';
import './App.css';
import {useState} from 'react';
// 导入时改为大写开头
import SignUpComponent from './SignUpComponent';

function App() {
  
  const [signUpState, setSignUpState] = useState(false);
  
  function controllSignUp(){
      setSignUpState(!signUpState)
  }

  return (
    <div className="App">
        <div className ="SignIn">
            <h1>LOGIN</h1>
            <form className = "loginForm">
                <label htmlFor="email">email</label>
                    <input
                      id="email"
                      type="email"
                      name="email"
                      placeholder="test@email.com"
                    />
                <label htmlFor="password">password</label>
                    <input
                      id="password"
                      type="password"
                      name="password"
                      placeholder="****************"
                    />
                <button type="submit">login</button>
              </form>
            <button onClick={controllSignUp}>切换到注册</button>
            {/* 渲染组件时也改为大写开头 */}
            {signUpState && <SignUpComponent/>}
        </div>
    </div>
  );
}

export default App;

2. 额外优化提示 #

• 按钮原文本signin和功能不符，建议改为切换到注册或注册，避免用户混淆
• 表单的submit按钮点击后会触发页面刷新，可在表单的onSubmit事件中添加e.preventDefault()阻止默认行为

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