React中对应Vue的v-if的实现方式及加载状态变更后组件不重新渲染问题咨询

嘿，我明白你遇到的困扰了！在React里实现类似Vue中v-if的条件渲染，思路其实和你用的{ loading && <div className="loading"></div> }是一致的，但问题出在你没有用React的状态管理机制来维护变量，导致修改后组件没触发重渲染。

咱先拆解下你代码里的问题：

• 你在render()函数里定义了let loading = false，但React的render()方法每次组件需要更新时都会重新执行，这就意味着每次渲染这个变量都会被重置回false，哪怕你在login函数里改成了true。
• 直接修改普通变量不会触发React的重渲染机制——React只有当组件的state或者props发生变化时，才会重新执行render来更新UI。

正确的解决办法：用组件的state管理状态 #

对于类组件来说，我们需要把loading、username、password这些需要随用户操作变化的变量放进组件的state里，并且通过this.setState()方法来修改状态，这样React才会感知到变化并更新UI。

下面是修改后的完整代码，关键改动我都加了注释：

import React from "react";
import axios from "axios";

export class LoginPage extends React.Component{
    // 初始化组件状态，用类字段语法更简洁（替代构造函数写法）
    state = {
        username: '',
        password: '',
        loading: false
    }

    login = () => {
        // 用this.setState修改状态，触发组件重渲染
        this.setState({ loading: true });
        console.log(this.state.loading);
        // 后续你可以在这里写axios请求的逻辑，比如：
        // axios.post('/login', {
        //     username: this.state.username,
        //     password: this.state.password
        // }).then(res => {
        //     // 请求成功后的逻辑，比如修改loading为false
        //     this.setState({ loading: false });
        // }).catch(err => {
        //     // 请求失败也要把loading改回来哦
        //     this.setState({ loading: false });
        // })
    }

    render(){
        // 从state里解构出变量，方便使用
        const { username, password, loading } = this.state;
        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"/>
                {/* 这里的逻辑与写法就是React里对应v-if的实现，现在状态变化会触发更新啦 */}
                { loading && <div className="loading"></div> }
                <div className="login">
                    <h1>Login/Register</h1>
                    <div>
                        <i className="fas fa-user"></i>
                        <input 
                            type="text" 
                            // 用value绑定state里的username，实现受控组件
                            value={username}
                            onChange={(e) => this.setState({ username: e.target.value })} 
                            placeholder="Username" 
                            maxLength="15"
                        />
                    </div>
                    <div>
                        <i className="fas fa-lock"></i>
                        <input 
                            type="Password" 
                            value={password}
                            onChange={(e) => this.setState({ password: e.target.value })} 
                            placeholder="Password" 
                            maxLength="18"
                        />
                    </div>
                    <button onClick={this.login}>Login/Register</button>
                </div>
            </div>
        );
    }
}

额外说明： #

• 我把username和password也放进了state里，并且做成了受控组件（通过value绑定state，onChange更新state），这样输入框的值才会稳定保存，不会因为组件重渲染丢失。
• React里的条件渲染除了&&，还可以用三元表达式，比如{ loading ? <div className="loading"></div> : null }，效果是一样的，你可以根据习惯选择。

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