Javascript 如何在反应中隐藏和显示 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/41819342/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to hide and show a div in react
提问by CraZyDroiD
hi i'm new to reactjs and i want to learn how to hide and show a div on button click. This is the view part i want to hide
嗨，我是 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>
回答by Chris
Typical way
典型方式
The most common pattern to this is selectively rendering the element based on state.
最常见的模式是根据状态有选择地渲染元素。
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>
)
}
}
Alternative
选择
You can also use a style based on state. This is less common, but can be useful when you have complex components inside that div - one recent example, I had a complex non-React D3 graph within a toggle-able component, initially, I used the first method above, but caused quite a bit of lagging when flicking the div on/off because D3 was cycling up again.
您还可以使用基于状态的样式。这不太常见，但是当你在那个 div 中有复杂的组件时会很有用 - 最近的一个例子，我在一个可切换的组件中有一个复杂的非 React D3 图，最初，我使用了上面的第一种方法，但导致了相当打开/关闭 div 时有点滞后，因为 D3 再次循环。
Generally use the first approach though, unless you have a reason to use the alternative.
但通常使用第一种方法，除非您有理由使用替代方法。
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
笔记
I use the ?:ternary operator instead of &&- I'm a strong believer that the use of &&is relying on a side effect of that operator to achieve a certain outcome. It works, don't get me wrong, but the ternary operator, in my opinion, is far more expressive and was designed to be a conditional.
我使用?:三元运算符而不是&&- 我坚信使用&&是依靠该运算符的副作用来实现特定结果。它有效，不要误会我的意思，但在我看来，三元运算符更具表现力，并且被设计为有条件的。
This last bit is just my opinion - so I'm not questioning the use of &&.
最后一点只是我的意见 - 所以我不质疑&&.
回答by Charles Jaimet
In React you just don't render that portion of the HTML. So make it part of a conditional:
在 React 中，你只是不渲染 HTML 的那部分。所以让它成为条件的一部分：
{ this.props.display &&
<div className="comment_usr_details">
...
</div>
}
So if this.props.display is true the div shows and if it's false it doesn't.
因此，如果 this.props.display 为真，则 div 显示，如果为假，则不显示。
回答by Charlie Martin
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>
)
}
}
