¿Qué es v-if en reaccionar? Intenté esto, pero Mi div con la clase de carga no funciona cuando cambian los datos de carga, por lo que el div no se vuelve a renderizar. los códigos están aquí:
{ loading && <div className="loading"></div> }Estoy cambiando la carga con una función, esta función funciona con el evento onclick.
todo mi código:
import React from "react"; import axios from "axios"; export class LoginPage extends React.Component{ render(){ let username = '', password = '', loading = false function login(){ loading = true; console.log(loading) } return ( <div className="App"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossOrigin="anonymous" referrerpolicy="no-referrer"/> { loading && <div className="loading"></div> } <div className="login"> <h1>Login/Register</h1> <div> <i className="fas fa-user"></i> <input type="text" onChange={(e) => username = e.target.value} placeholder="Username" maxLength="15"/> </div> <div> <i className="fas fa-lock"></i> <input type="Password" placeholder="Password" onChange={(e) => password = e.target.value} maxLength="18"/> </div> <button onClick={() => login()}>Login/Register</button> </div> </div> ); } }Le sugiero que lea sobre React State, algunas cosas en este código están mal. Pero arreglemos tu problema.
Primero agregue esta variable al estado y luego cámbiela con setState para activar una nueva representación:
export class LoginPage extends React.Component{ constructor(props) { super(props); this.state = { loading: false }; } login(){ this.setState({ loading: true }) console.log(this.state.loading) } render(){ let username = '', password = '', // your return will stay the same } }