React：Root class 中的条件渲染无效

Question

我在website上看到了React的文章。但是，虽然我按如下方式实现条件渲染功能：

export class Root extends React.Component {
    constructor(props) {
        super(props);
    };
    log_out = () => {        };      
  
    render() {
        var dropdown_menu;
        firebase.auth().onAuthStateChanged((user) => {
            // Check user login
            if (user) {
                console.log("start render root with user login");
                dropdown_menu = <div id="dynamic-menu" class="dropdown-menu" aria-labelledby="navbarDropdown">
                                    <a class='dropdown-item'>{user.email}</a>
                                    <a class='dropdown-item' id='logout-btn' onClick={() => this.log_out()}>Logout</a>
                                </div>;
            } else {
                console.log("start render root without user login")
                dropdown_menu = <div id="dynamic-menu" class="dropdown-menu" aria-labelledby="navbarDropdown">
                                    <a class="dropdown-item" href="./signin.html">Login</a>
                                </div>;
            }
        });
        return (
            <div>
                <nav class="navbar navbar-expand-md fixed-top navbar-dark bg-dark"> {/* nav is for upper bar of functional buttons */}
                    <a class="navbar-brand" href="index.html">Simple Forum</a>
                    <button class="navbar-toggler p-0 border-0" type="button" data-toggle="offcanvas"> {/* RWD navbar toggler */}
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    <div class="navbar-collapse offcanvas-collapse" id="navbarsExampleDefault">
                        <ul class="navbar-nav mr-auto">
                            <li class="nav-item dropdown">
                                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Account</a>
                                {dropdown_menu}
                            </li>
                        </ul>
                    </div>
                </nav>

                <div id="custom-alert"></div>
                <main role="main" class="container">
                    <div class="d-flex align-items-center p-3 my-3 text-white-50 bg-purple rounded box-shadow">
                        <img class="mr-3" src="img/bootstrap.svg" alt="" width="48" height="48"/>
                        <div class="lh-100">
                            <h6 class="mb-0 text-white lh-100">Lab 07 Simple Forum</h6>
                            <small>Software Studio 2022 Spring</small>
                        </div>
                    </div>
                    <div id="post_list">
                    </div>

                    <div class="my-3 p-3 bg-white rounded box-shadow">
                        <h5 class="border-bottom border-gray pb-2 mb-0">New Post</h5>
                        <textarea class="form-control" rows="5" id="comment"></textarea>
                        <div class="media text-muted pt-3">
                            <button id="post_btn" type="button" class="btn btn-success" onClick={() => {post_handler()}}>Submit</button>
                        </div>
                    </div>
                </main>

                <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
                <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
                <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
                <script src="js/offcanvas.js"></script>
            </div>
        );
    }
}

我的 dropdown_menu 被 Chrome 忽略了。更具体地说，控制台日志确实显示“在没有用户登录的情况下启动渲染根目录”，但是 Chrome 元素完全忽略 {dropdown_menu}。

Answer 1

您必须在 componentDidMount 中将用户设置为状态（通过初始设置为 null）并像这样渲染它

state = { user: null}

componentDidMount {
   firebase.auth().onAuthStateChanged((user) => this.setState({user})
}
...
<div class="navbar-collapse offcanvas-collapse" id="navbarsExampleDefault">
                        <ul class="navbar-nav mr-auto">
                            <li class="nav-item dropdown">
                                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Account</a>
                                {this.state.user ? <div id="dynamic-menu" class="dropdown-menu" aria-labelledby="navbarDropdown">
                                    <a class='dropdown-item'>{user.email}</a>
                                    <a class='dropdown-item' id='logout-btn' onClick={() => this.log_out()}>Logout</a>
                                </div> : <div id="dynamic-menu" class="dropdown-menu" aria-labelledby="navbarDropdown">
                                    <a class="dropdown-item" href="./signin.html">Login</a>
                                </div>}
                            </li>
                        </ul>
                    </div>

React：Root class 中的条件渲染无效

React：conditional render in Root class did not work

javascript

reactjs

firebase-authentication