react如何控制一个组件的显示和隐藏，且隐藏后该组件的js程序还在运行

Question

问题描述

react如何控制一个组件的显示和隐藏，且隐藏后该组件的js程序还在运行

问题出现的环境背景及自己尝试过哪些方法

尝试控制display属性不知可否

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

你期待的结果是什么？实际看到的错误信息又是什么？

期待组件隐藏后还在运行

Answer 1

css

• display
• opacity(不推荐，可能会引起遮盖)
• visibility

Answer 2

react呢不提倡对dom元素的操作。
元素的隐藏与显示当然是css的事。比如：

.show {
    display: block;
}
.hidden {
    display: none;
}

那么：

<div className={isShow ? 'show': 'hidden'}/>

建议你，不显示的内容直接unmount掉，这样就不会出现你的那种情况了。eg:

{isShow ? <div className='show'/>}

Answer 3

你如果需要控制在页面上看不到之后，代码还继续执行，只能给根元素设置display属性

Answer 4

css 控制 display