什么是 v-if 在反应

Question

反应中的 v-if 是什么？我试过了，但是当加载数据发生变化时，我的加载类的 div 不起作用，所以 div 不会重新渲染自己。 代码在这里：

{
    loading &&
    <div className="loading"></div>
}

我正在使用函数更改加载，该函数与 onclick 事件一起使用。

我的所有代码：

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>
        );
    }
}

Answer 1

我建议您阅读有关 React State 的内容，这段代码中的某些内容是错误的。但是让我们解决您的问题。

先将此变量添加到状态，然后用setState更改它，以触发重新渲染：

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
    }
}