React（8）条件渲染（类似 Vue 的 v-if）

亦凉 2022-05-31 08:08 327阅读 0赞

### 14、条件渲染（类似 Vue 的 v-if） ###

讲道理说，React 本身的条件渲染，没有 Vue.js 用起来舒服。Vue.js 只需要在标签上添加 `v-if` 或者 `v-show` 就行，但 React 就比较麻烦了。

class HelloWord extends React.Component { 
        constructor(props) {
            super(props);
            this.state = {
                show: false
            }
        }
    
        // 渲染函数，this 指向实例本身
        render() {
            let display = this.display.bind(this)
            return <div>
                {
       /* 这种方法省略了 this 绑定的过程 */}
                <button onClick={display}>{
       this.state.show ? '点击隐藏' : '点击显示'}</button>
                {
                    this.state.show
                        ?
                        <p>显示出来啦</p>
                        :
                        null
                }
            </div>
        }
    
        display() {
            this.setState({
                show: !this.state.show
            })
        }
    }

如以上示例，通过三元操作符里面，返回 `JSX` 语法的 DOM 标签，或者 null ，来决定是否显示；

也可以将 JSX 语法的 DOM 作为变量，像下面这样使用。

render() {
        let display = this.display.bind(this)
        let DOM = null
        if (this.state.show) {
            DOM = <p>显示出来啦</p>
        }
    
        return <div>
            {
       /* 这种方法省略了 this 绑定的过程 */}
            <button onClick={display}>{
       this.state.show ? '点击隐藏' : '点击显示'}</button>
            {DOM}
        </div>
    }

关于 v-show 就没什么好说的了吧？手动设置标签的 style 就行，很简单。

发表评论取消回复

表情：

评论列表（有 0 条评论，327人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue 条件渲染

v-if <h1 v-if="ok">Yes</h1> 在 <template> 元素上使用 v-if 渲染分组因为 v-if 是一个指令，所以必须...

深碍√TFBOYSˉ_/ 2024年04月18日 21:21/ 0 赞/ 25 阅读

相关 react 条件渲染

在 `React` 中，你可以创建不同的组件来封装各种你需要的行为。然后还可以根据应用的状态变化只渲染其中的一部分。 `React` 中的条件渲染和 `JavaScript`

朴灿烈づ我的快乐病毒、/ 2022年12月27日 01:42/ 0 赞/ 183 阅读

相关 React学习之条件渲染

说明：本系列所有demo代码的github地址为：[https://github.com/Brucewu998/react.js-learning][https_github

た入场券/ 2022年12月02日 15:27/ 0 赞/ 145 阅读

相关 React（8）条件渲染（类似 Vue 的 v-if）

14、条件渲染（类似 Vue 的 v-if）讲道理说，React 本身的条件渲染，没有 Vue.js 用起来舒服。Vue.js 只需要在标签上添加 `v-if` 或者

亦凉/ 2022年05月31日 08:08/ 0 赞/ 328 阅读

相关 vue条件渲染

v-if <head> <meta charset="UTF-8"> <title>条件渲染</title> <script src="js/vue

痛定思痛。/ 2022年05月25日 13:13/ 0 赞/ 217 阅读

相关 Vue—-条件渲染

Vue–条件渲染指令 1、v-if 使用方法，因为 v-if 是一个指令，所以必须将它添加到一个元素上。 <p v-if="ok">表白成功</p>

一时失言乱红尘/ 2022年05月18日 10:54/ 0 赞/ 208 阅读

相关 Vue条件渲染

Vue条件渲染 v-if v-else v-else-if 用 key 管理可复用的元素 v-show v-if vs v-show

谁践踏了优雅/ 2021年10月20日 00:26/ 0 赞/ 430 阅读

相关 Vue条件渲染

本博客记录了小编在学习Vue过程中的体会与感悟，简单来说就是小编的学习笔记，学习地址主要为Vue的官网，官网地址为：[《Vue官方文档》][Vue]。相关学习笔

约定不等于承诺〃/ 2021年09月20日 02:54/ 0 赞/ 368 阅读

相关 Vue - 条件渲染

Vue 中条件渲染一. v-if 和 v-show 二. v-if 和 v-else 三. v-if、v-else-if 和 v-else 四.

清疚/ 2021年07月25日 17:13/ 0 赞/ 433 阅读

相关 react 条件渲染

1、讲jsx内容放进数组里,然后{}解析,会自动去掉[ ]和",",展现数组内容 2、利用arr.map(function(item,index){return

朱雀/ 2021年07月24日 12:38/ 0 赞/ 410 阅读