Как инициализировать React Materialize Dropdown после componentDidMount - PullRequest
Новая
       7

Как инициализировать React Materialize Dropdown после componentDidMount

0 голосов
/ 14 мая 2019

Мой компонент Navbar не имеет разметки Раскрывающийся материал, пока пользователь не войдет в систему, и в этот момент я использую условный рендеринг и не добавлю новую разметку. Однако я не могу использовать React.createRef() для ссылки на новую разметку, чтобы инициализировать раскрывающийся список. Пожалуйста, найдите ссылку на мой проект, где вы можете создать учетную запись и увидеть проблему для себя .

Проблема в том, что я не могу воссоздать ссылку после compononentDidMount.

Я попытался создать ссылку (React.createRef()) в componentWillReceiveProps и componentWillUpdate, но при попытке создать ссылку там я получаю нулевое значение. 

class Navbar extends Component {
    userRef = React.createRef();

    render() {        
        const { isAuthenticated, user } = this.props.auth;

        // show these when logged
        const authLinks = (
            <ul id="nav-mobile" className="right hide-on-med-and-down">
                <li className="avatar">
                    <a href="#" ref={this.userRef} data-target="dropdown1" className="dropdown-trigger">
                        <div className="avatar">
                        </div>
                        {user.username}
                    </a>
                    <ul id="dropdown1" className="dropdown-content">
                        <li><Link to="/dashboard">Dashboard</Link></li>
                    </ul>
                </li>
            </ul>
        );

        // show these when not logged in
        const guestLinks = (
            <ul id="nav-mobile" className="right hide-on-med-and-down">
                <li><Link to="/login">Login</Link></li>
                <li><Link to="/register">Register</Link></li>
            </ul>
        );
        return (
            <nav>
                {isAuthenticated ? authLinks : guestLinks}
            </nav>
        )
    }
}

Мне нужно сослаться на элемент Dropdown DOM, когда мой Navbar получает новые реквизиты (когда пользователи успешно вошли в систему), чтобы я мог инициализировать его (window.M.Dropdown.init(this.dropdownRef.current)), когда он имеет правильную разметку.

...