reactjs - 为什么在 React.js 中的 componentDidMount 之前没有渲染元素？

Question

我没有找到这个元素<div className="sc" id="firechat-wrapper"></div> 据我所知，首先render发生然后componentDidMount根据 React LefeCycle 发生。这段代码有什么问题？下面是代码。

    // eslint-disable-next-line no-unused-vars
        import React, { Component } from "react";
        import { FirebaseContext } from "../firebase";

        const menuItems = [

           { id: 1, name: "Profile", class: "icon-user", level: 0 },
        ];

        class Home extends Component {
            static contextType = FirebaseContext;

            constructor(props) {
                super(props);
                this.state = { menuItems: menuItems, activeMenuLevel0: null
                            };
                this.handleClick = this.handleClick.bind(this);
                this.handleContextMenu = this.handleContextMenu.bind(this);
            }

            componentDidMount() {

                this.context.auth.onAuthStateChanged(function(user) {
                    if (user) {

                        console.log(user.uid);
                        var self = this;
                        var elem = document.getElementById("firechat-wrapper");
                        var chatRef = this.context.database.ref();
                        // eslint-disable-next-line no-undef
                        this.chat = new FirechatUI(chatRef, elem);
                        self.chat.setUser(user.uid, user.displayName);

                    }
                });

            }

            handleClick(event, menuItem) {
                event.preventDefault();
                this.handleContextMenu(menuItem);
                console.log("handle click");
            }

            handleContextMenu(menuItem) {
                console.log("Handle context menu level");
                this.setState({ activeMenuLevel0: menuItem });
            }


            render() {
                const { expended } = this.state;

                return (
                    <>
                        <footer className="footerBox">
                            <Menu items={this.state.menuItems} onMenuItemClick={this.handleClick}></Menu>
                            {this.state.activeMenuLevel0 ?
                                (<>
                                    {this.state.activeMenuLevel0 && this.state.activeMenuLevel0.id == 1 &&
                                        <>
                                        <div className="sc" id="firechat-wrapper"></div>
                                        </>
                                    }
                                </>)
                            : null}
                        </footer>
                    </>
                );
            }
        }

        export default Home;

标签： reactjs

Answer 1

您用于有条件activeMenuLevel0地渲染<div className="sc" id="firechat-wrapper"></div>，因此在第一次渲染后，activeMenuLevel0值为 null，因此您得到了 null。它只是在handleClick被调用时呈现。