React createRef current is null

Here I got this little code:

    import '../styles/Navbar.css';
    import * as React from 'react';
    import logo from '../assets/logo.webp';
    
    class Navbar extends React.Component {
        constructor(props) {
            super(props);
            this.ref1 = React.createRef();
            this.ref2 = React.createRef();
        };
    
        navAppear() {
            const navbar = this.ref1.current;
            const appearButton = this.ref2.current;
    
            this.switchDisplay(navbar, 'flex');
            this.switchClassBetween('bi-list', appearButton, 'bi-x');
        }
    
        switchClassBetween(className, element, className2) {
            if (element.classList.contains(className)) {
                element.classList.replace(className, className2);
            } else {
                element.classList.replace(className2, className);
            }
        }
    
        switchDisplay(element, displayType) {
            if (element.style.display === 'none') {
                element.style.display = displayType;
            } else {
                element.style.display = 'none';
            }
        }
    
        render() {
            const elems = [];
            const navHeaders = <div className="Navbar-headers Nav-separator" key="navbar-headers" ref={this.ref1}>
                <img className="Navbar-brand" src={logo} alt="Logo" />
                <a href="/#/" className="Navbar-brand-title">Adam Billard</a>
            </div>;
            elems.push(navHeaders);
            const navItems = <ul className="Navbar-items Nav-separator" key="navbar-items" ref={this.ref2}>
                <li className="Navbar-item"><a href="/#/" className="Navbar-link">Home</a></li>
                <li className="Navbar-item"><a href="/#/about" className="Navbar-link">About</a></li>
                <li className="Navbar-item"><a href="/#/contact" className="Navbar-link">Contact</a></li>
            </ul>;
            elems.push(navItems);
    
            const btn = <button className="Navbar-appear-button" onClick={this.navAppear()}><i className="bi bi-list"></i></button>;
            elems.push(btn);

            return <nav>{elems}</nav>;
        };
    }
    
    export default Navbar;

So this code makes a Navbar that is supposed to be responsive, lemme explain.
The navbar is rendered, the Navbar-appear-button is on display:none, but if the screen width is less than 768, then the dislay of the button ```
Uncaught TypeError: Cannot read properties of null (reading 'style')
at Navbar.switchDisplay (Navbar.js:30:1)
at Navbar.navAppear (Navbar.js:17:1)
at Navbar.render (Navbar.js:51:1)
at finishClassComponent (react-dom.development.js:19752:1)
at updateClassComponent (react-dom.development.js:19698:1)
at beginWork (react-dom.development.js:21611:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
at invokeGuardedCallback (react-dom.development.js:4277:1)
at beginWork$1 (react-dom.development.js:27451:1)

I'm kinda new at React so idk what to do.
And here's the error I'm getting:
And if I log my this.ref1:
[this.ref1 logging on console](https://i.stack.imgur.com/OHEH2.png)
So I don't know how to make the ref's current property equal to an HTMLElement or anything that will help me using style and classList properties.
</details>
# 答案1
**得分**: 0
- 不要在渲染时直接调用 `navAppear` 函数；而是将该函数传递给 `onClick`。
- 你还需要将 `this` 上下文绑定到该函数上。
```jsx
onClick={this.navAppear.bind(this)}

onClick={this.navAppear.bind(this)}