如何在react中隐藏和显示div
如何在react中隐藏和显示div
提问于 2017-01-24 11:05:56
嗨，我是reactjs的新手，我想学习如何在点击按钮时隐藏和显示div。这是我想要隐藏的视图部件
<div className="comment_usr_details">
<div>
<img className="comment_usr_pic" src={profilePicture} alt=""/>
</div>
<div className="b">
<p className="c">John Smith</p>
<p className="d">1 minutes ago</p>
</div>
<img className="e" src={downarrow} alt=""/>
</div>回答 3
Stack Overflow用户
回答已采纳
发布于 2017-01-24 12:49:04
典型方式
最常见的模式是基于状态选择性地呈现元素。
class Foo extends React.Component {
state = { showing: true };
render() {
const { showing } = this.state;
return (
<div>
<button onClick={() => this.setState({ showing: !showing })}>toggle</button>
{ showing
? <div>This is visible</div>
: null
}
</div>
)
}
}替代方案
您还可以使用基于状态的样式。这不太常见，但当你在div中有复杂的组件时，这是很有用的-最近的一个例子，我在一个可切换的组件中有一个复杂的非反应D3图，最初，我使用了上面的第一种方法，但由于D3再次循环，在打开/关闭div时导致了相当多的滞后。
通常使用第一种方法，除非您有理由使用另一种方法。
class Foo extends React.Component {
state = { showing: true };
render() {
const { showing } = this.state;
return (
<div>
<button onClick={() => this.setState({ showing: !showing })}>toggle</button>
<div style={{ display: (showing ? 'block' : 'none') }}>This is visible</div>
</div>
)
}
}备注
我使用?:三进制运算符而不是&& -我坚信&&的使用依赖于该运算符的副作用来实现某个结果。它是有效的，不要误会我的意思，但在我看来，三元运算符的表现力要强得多，而且被设计成一个条件运算符。
最后一点只是我的观点--所以我不会质疑&&的使用。
Stack Overflow用户
发布于 2017-01-24 11:11:46
在React中，您不会呈现该部分HTML。因此，将其作为条件的一部分：
{ this.props.display &&
<div className="comment_usr_details">
...
</div>
}因此，如果this.props.display为真，则显示div，如果为假，则不显示。
Stack Overflow用户
发布于 2017-01-24 11:17:43
class HideAndShowDivOnClick extends React.Component {
state = {
showDiv: true
}
render() {
const { showDiv } = this.state
return (
<div>
<button onClick={() => this.setState({ showDiv: !showDiv })}>
{ showDiv ? 'hide' : 'show' }
</button>
{ showDiv && (
<div id="the div you want to show and hide">Peek a boo</div>
)}
</div>
)
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/41819342
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号