@d2207

Как правильно использовать JSX?

В моем приложении React использую простой JSX, но поведение странное. Первые 3 Linkвыглядят правильно, но последние 3 всегда меняют display: none то есть они "скачут". Никаких ошибок, это похоже как будто React DOM постоянно сравнивает элемент и обновляет его . Я не понимаю, что происходит.
render() {
        const { currentUser } = this.state;

        return (
            <div>
                <Layout>
                    <Header style={{position: 'fixed', zIndex: 1, width: '100%'}}>
                        <Menu theme="dark" mode="horizontal">
                            <Menu.Item>
                                <Link to="/">Grid</Link>
                            </Menu.Item>
                            <Menu.Item>
                                <Link to="/charts">Charts</Link>
                            </Menu.Item>
                            <Menu.Item>
                                <Link to="/onlineCharts">Online charts</Link>
                            </Menu.Item>
                            {/*<Menu.Item>*/}
                            {/*    <Link to="/profile">{currentUser.username}</Link>*/}
                            {/*</Menu.Item>*/}
                            {/*<Menu.Item>*/}
                            {/*    <a href="/" onClick={this.logOut}>*/}
                            {/*        LogOut*/}
                            {/*    </a>*/}
                            {/*</Menu.Item>*/}
                            {/*<Menu.Item>*/}
                            {/*    <Link to="/login">Login</Link>*/}
                            {/*</Menu.Item>*/}
                            {/*<Menu.Item>*/}
                            {/*    <Link to="/register">Register</Link>*/}
                            {/*</Menu.Item>*/}
                                {currentUser ? (
                                    <div>
                                        <Menu.Item>
                                            <Link to="/profile">{currentUser.username}</Link>
                                        </Menu.Item>
                                        <Menu.Item>
                                            <a href="/" onClick={this.logOut}>
                                                LogOut
                                            </a>
                                        </Menu.Item>
                                    </div>
                                ) : (
                                    <div>
                                        <Menu.Item>
                                            <Link to="/login">Login</Link>
                                        </Menu.Item>
                                        <Menu.Item>
                                            <Link to="/register">Register</Link>
                                        </Menu.Item>
                                    </div>
                                )}
                        </Menu>
                    </Header>
                </Layout>
            </div>
        )
    }
}
  • Вопрос задан
  • 67 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
PaulCamper Берлин
от 2 000 до 3 100 $
Leningrad Media Санкт-Петербург
от 100 000 до 150 000 ₽
04 авг. 2020, в 08:36
2000 руб./за проект
04 авг. 2020, в 06:54
5000 руб./за проект
04 авг. 2020, в 03:17
1000 руб./за проект