Блог

У меня есть очень простой компонент, в котором я хотел бы отобразить ‘cookiePopup’ на основе того, является ли состояние ‘cookieShow’ истинным или ложным. Я бы хотел переключить состояние на false, нажав «контейнер закрытия cookie», тем самым удалив компонент. Это делается с помощью троичного оператора, который, если значение ‘cookieShow’ равно true, отобразит компонент, если оно равно false, вернет значение ‘null’.

Однако всякий раз, когда страница загружается, cookiePopup не отображается. Я думаю, это связано с моим троичным оператором, так как кажется, что это что-то простое, но я не могу в этом разобраться.

Вот мой код:

 class CookiePopup extends Component {
  constructor(props) {
    super(props)
    this.state = {
      cookieShow: true
    }
    this.handleClick = this.handleClick.bind(this)
    this.showCookiePopup = this.showCookiePopup.bind(this)
    this.removeCookiePopup = this.removeCookiePopup.bind(this)
  }

  handleClick() {
    this.setState(state => ({
      cookieShow: false
    }));
  }

  showCookiePopup() {
    return (
      <div className="cookie-popup-container">
        <div onClick={this.handleClick} className="cookie-close-container">
          <span className="cookie-close-span-1"></span>
          <span className="cookie-close-span-2"></span>
        </div>
        <div className="cookie-text-container">
          <p className="cookie-text">By using our website, you agree to our <a class="cookie-link" href="/cookies" target="_self">cookies</a> policy.</p>
        </div>
      </div>
    )
  }

  removeCookiePopup() {
    return (
      null
    )
  }

  render() {

    return (
      <div>
      { this.state.cookieShow ? this.showCookiePopup : this.removeCookiePopup }
      </div>
    )
  }
}
  

Не уверен, что я делаю не так, но буду признателен за любые советы! Спасибо.

Попробуйте это

  { this.state.cookieShow ? this.showCookiePopup() : this.removeCookiePopup() }
  

Что касается проблемы с рендерингом, я бы сказал, это потому, что вы не выполняете функции в своем троичном, попробуйте добавить скобку следующим образом :

{ this.state.cookieShow? this.showCookiePopup() : this.removeCookiePopup() }

Следующее не вызывает ваших проблем, но вы могли бы лучше кодировать :

• Вам не нужно привязывать свои методы в конструкторе, если вы используете функции со стрелками, например :

  removeCookiePopup = () => { // TODO }

• Я не уверен в том, как вы написали свой setState, если кто-то еще может подтвердить, что это правильный способ его записи? В любом случае, обычно мы пишем это так :

  this.setState({cookieShow: false });

Или, что еще лучше, вы можете использовать предыдущее значение состояния, поскольку React заявляет, что это правильный путь (https://reactjs.org/docs/state-and-lifecycle.html ), вот так :

 this.setState((previousState) => ({ cookieShow: !previousState.cookieShow}) );
  

который будет переключать ваш модальный между true и false, что означает, что вам нужен только один метод для его открытия и закрытия.