React SmoothScroll не отвечает при нажатии - PullRequest
Новая
       7

React SmoothScroll не отвечает при нажатии

0 голосов
/ 18 июня 2020

Я создаю свое первое приложение React JS и пытаюсь создать эффект плавной прокрутки. В моих отдельных компонентах я дал каждому div-оболочке уникальный идентификатор для каждой ссылки и успешно установил реакцию-прокрутку. Когда я щелкаю каждый элемент на панели навигации, мне кажется, что он не отвечает. Чтобы проверить, я просто помещаю несколько предупреждений при щелчке, и при обновлении страницы запускаются все три предупреждения, а затем ссылки снова перестают отвечать. Я использую компоненты Link из react-scroll и меню навигации из react-mdl. Есть ли что-то, что я делаю явно не так с кем-то более опытным? Я покажу свое меню следующим образом и для краткости простейшие из моих компонентов. Заранее спасибо! 

import React, { Component } from 'react';
import { Grid, Cell } from 'react-mdl';



class Contact extends Component {
    render() {
        return (
            <div className="contact-body" id="contact">
                <Grid className="contact-grid">
                    <Cell col={1}></Cell>
                    <Cell col={10}>
                        <h2 style={{fontFamily: 'Oxygen'}}>Contact Phil</h2>
                        <div className="contact-list">
                            <ul>
                                <li style={{fontSize: '25px', fontFamily: 'Oxygen'}}>
                                    <i className="fa fa-phone-square" aria-hidden="true" />
                                    (778) - 870 - 8480
                                </li>
                                <li style={{fontSize: '25px', fontFamily: 'Oxygen'}}>
                                    <i className="fa fa-envelope" aria-hidden="true" />
                                    pfiess@protonmail.com
                                </li>
                            </ul>                          
                        </div>
                    </Cell>
                    <Cell col={1}></Cell>
                </Grid>
            </div>
        )
    }
}

export default Contact;

Всем компонентам, на которые я хотел бы указать, присвоены идентификаторы в соответствующих файлах.

Все остальное работает нормально. Я просто хочу закончить эту последнюю функцию!

Если какие-либо другие альтернативы реакции-прокрутки более целесообразны, то я тоже все уши.

Всем спасибо! Это мой первый пост, поэтому я буду благодарен за любые предложения, как лучше общаться.

...