在 React 中单击按钮时删除 cookie 弹出窗口不起作用

Question

我有一个非常简单的组件，我想根据状态"cookieShow"是true还是false来呈现"cookiePopup"。我想通过单击"cookie关闭容器"将状态切换为false，从而删除该组件。这是通过一个三元运算符完成的，如果"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>
)
}
}

不确定我做错了什么，但如果有任何建议，我们将不胜感激！非常感谢。

Answer 1

试试这个

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

Answer 2

关于渲染问题，我想说这是因为你没有执行三进制中的函数，试着添加这样的括号：

｛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之间切换你的模态，这意味着你只需要一个方法来打开和关闭它