Блог

Я визуализирую свой компонент при нажатии на ссылку в моем нижнем колонтитуле, однако элемент почти сразу же повторно визуализируется.

 class Footer extends Component {
constructor(props) {
    super(props);
    this.state = {
        privacyVisibile: false
    };
    this.togglePrivacyVisible = this.togglePrivacyVisible.bind(this)
}

togglePrivacyVisible = () => {
    const { privacyVisibile } = this.state;
    this.setState({ privacyVisibile : !privacyVisibile })
}

render() {
    return (
        <div>
            {this.state.privacyVisibile amp;amp; <Privacy />} 
            <ul className="footer-menu">
                <li><a href="about.html">About</a></li>
                <li onClick= {this.togglePrivacyVisible}>Privacy</li>
            </ul>                            
        </div>
    )
 }
}

export default Footer;
  

Если я перемещаю рендеринг состояния сверху моего UL ниже него, он вообще не отображается при попытке переключения.

Я видел предложения перезапустить мое приложение, но, похоже, это не имеет никакого эффекта, есть какие-либо другие идеи, что здесь может происходить?

При нажатии на ссылку браузер переходит от страницы и пытается загрузить privacy.html страница. Попробуйте использовать кнопку вместо ссылки, без href:

 <button onClick={this.togglePrivacyVisible}>Privacy</button>
  

Вы могли бы предотвратить действие по умолчанию щелчка по тегу привязки, используя событие#preventDefault. Нравится:

 togglePrivacyVisible = (event) => {
    event.preventDefault();
    const { privacyVisibile } = this.state;
    this.setState({ privacyVisibile : !privacyVisibile })
}
  

Я не думаю, что вам нужно использовать синтаксис функции arrow для вашей функции И bind (this) в вашем конструкторе. Не уверен, вызывает ли это странное поведение, но вы должны использовать один или другой.