Question

我想在不使用额外的cookie npm软件包的情况下为我的Gatsby Hobby Page做一个简单的cookie通知。

我使用“ universal-cookie” npm包成功设置了cookie。单击同意横幅的“关闭”按钮时会更改状态，但确实会隐藏横幅。但是，当我现在重新加载页面时，即使正确设置了cookie和状态（通过console.log进行了检查），横幅仍会显示。

import React from 'react'
import Cookie from 'universal-cookie'

const cookie = new Cookie()

class CookieNotice extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      active: cookie.get('viewed_cookie_notice'),
    }
    this.toggleActiveClass = this.toggleActiveClass.bind(this)
  }

  componentDidMount() {
    this.setState({ active: cookie.get('viewed_cookie_notice') })
  }

  toggleActiveClass() {
    cookie.set('viewed_cookie_notice', true, { path: '/', expires: new Date(Date.now() + 2592000) })
    this.setState({ active: cookie.get('viewed_cookie_notice') })
  }

  render() {
    const { active } = this.state
    return (
      <div id="cookie-notice" className={active ? 'hidden' : null}>
          <button type="button" id="close-cookie" onClick={this.toggleActiveClass}>
            Close!
          </button>
        </div>
      </div>
    )
  }
}
export default CookieNotice

如果用户关闭了cookie横幅并且在每次访问该页面时都不向其展示，我只想永久隐藏cookie横幅。

Answer 1

在构造函数中，更改状态下的active值。

constructor(props) {
  super(props);
  this.state = { active: true };
}

通过将active的值设置为true，这意味着在第一次加载组件时，横幅将被隐藏，然后在setState中调用componentDidMount ，它将获取Cookie的值，然后使用正确的值进行重新渲染。

如何根据Cookie切换GatsbyJS中的类？

1 个答案: