嗨,我是 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>
典型方式
最常见的模式是根据状态选择性地渲染元素。
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 内有复杂的组件时可能会很有用 - 最近的一个例子,我在可切换组件内有一个复杂的非 React D3 图形,最初,我使用了上面的第一种方法,但引起了相当大的影响打开/关闭 div 时有点滞后,因为 D3 再次循环。
通常使用第一种方法,除非您有理由使用替代方法。
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>
)
}
}
Note
我用?:
三元运算符代替&&
- 我坚信使用&&
依靠该运算符的副作用来实现特定结果。它是有效的,不要误会我的意思,但在我看来,三元运算符更具表现力,并且被设计为条件运算符。
最后一点只是我的意见 - 所以我不会质疑使用&&
.
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)