[英]Adding CSS to react/JSX to hide a component
I am hiding and showing a component based on the state of a checkbox, and I am using a ternary operator to decide whether the component is shown or hidden. 我正在基于复选框的状态隐藏和显示组件,并且正在使用三元运算符来确定该组件是显示还是隐藏。 However, this component is handling data so it would be better to just hide the component with CSS, because every time the component is re-shown, it creates a new request.
但是,此组件正在处理数据,因此最好使用CSS隐藏该组件,因为每次重新显示该组件时,它都会创建一个新请求。 Below is the ternary operator:
以下是三元运算符:
const displayWidget = this.state.checked ? <Widget /> : null;
I have looked other examples trying to accomplish the same, some suggesting something like: 我看过其他尝试达到相同目的的示例,其中一些建议如下:
const divStyle = {
visibility: 'hidden',
}
const displayWidget = this.state.checked ? <Widget /> : <Widget style= {divStyle} />`
Is the second example the right way to go about it and I'm just doing something wrong, or is there another way to go about solving this problem? 第二个示例是正确的解决方法,而我只是做错了什么,还是有另一种方法可以解决此问题?
The simple answer is you can do either, it is simply based on your requirements. 简单的答案是您可以执行任何一项操作,这只是基于您的要求。
Returning null 返回null
const displayWidget = this.state.checked ? <Widget /> : null;
Doing it this way means that when this.state.checked
is true
then your Widget
component is mounted
and componentWillMount
/ componentDidMount
will be called. 这样做,这样意味着当
this.state.checked
是true
那么你Widget
组件mounted
和componentWillMount
/ componentDidMount
将被调用。
However, when this.state.checked
is false
the Widget
component will unmount
and if you stick a console.log
in the componentWillUnmount
function you will see this. 但是,如果
this.state.checked
为false
,则将unmount
Widget
组件,如果将console.log
粘贴在componentWillUnmount
函数中,则会看到此消息。
If this.state.checked
is true
(again) then your Widget
component is mounted
(again) and componentWillMount
/ componentDidMount
will be called (again). 如果
this.state.checked
为true
(再次),则将再次mounted
Widget
组件,并将再次调用componentWillMount
/ componentDidMount
。
Hiding via css 通过CSS隐藏
I would change your code to this: 我将您的代码更改为此:
const divStyle = {
visibility: 'hidden',
}
const displayWidget = <Widget style= {...this.state.checked ? {} : divStyle} />
This way means that on initial render
and this.state.checked
is true
then it will mount
in the same way as the null approach. 这种方式意味着在初始
render
且this.state.checked
为true
,它将以与null方法相同的方式mount
。
However, when this.state.checked
is false
, unmount
is NOT called as the component is still mounted
but is now simply being hidden via css
. 但是,如果
this.state.checked
为false
,则不会调用unmount
因为该组件仍在mounted
而现在只是通过css
隐藏。
A alternative approach to hiding a component but keeping it mounted 隐藏组件但保持安装状态的另一种方法
<Widget visible={this.state.checked} />
And in the render()
method of your Widget
component you could do something like: 在
Widget
组件的render()
方法中,您可以执行以下操作:
render() {
if (!this.props.visible) {
return null;
}
return <span>widget content</span>;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.