React的条件渲染和列表渲染

React事件

特点:
1/react事件,绑定事件的命名,驼峰命名法。
2/{},传入1个函数,而不是字符串

<button onClick={this.sendData}>传递helloworld给父元素</button>

事件对象:React返回的事件对象是代理的原生的事件对象,如果想要查看事件对象的具体值,必须之间输出事件对象的属性。

注意:
原生,阻止默认行为时,可以直接返回return false;
React中,阻止默认必须e.preventDefault();

React事件传参数

{/* 使用ES6箭头函数传递多个参数 */}
<button  onClick={(e)=>{this.parentEvent1(‘msg:helloworld‘,e)}}>提交</button>
{/* //不使用ES6箭头函数传递多个参数的方式 */}
<button  onClick={function(e){this.parentEvent1(‘不使用es6,msg:helloworld‘,e)}.bind(this)}>提交</button>

条件渲染

React中条件渲染即和JavaScript中,条件运算,如if...else...三元运算符等。

1/直接通过条件运算返回要渲染的JSX对象
2/通过条件运算得出jsx对象,在将JSX对象渲染到模板中。

案例一

//条件渲染一
function Login() {
    return (
        <div>
            <h1>欢迎登录</h1>
        </div>
    )
}

function LoginNeed() {
    return (
        <div>
            <h1>请先登录</h1>
        </div>
    )
}

class HelloWorld extends React.Component{
    constructor(props) {
        super(props)
        this.state = {
            isLogin:false
        }
    }
    render() {
        if(this.state.isLogin){
            return(
                <Login />
            )
        }else{
            return (
                <LoginNeed />
            )
        }
    }
}

ReactDOM.render(
    <HelloWorld />,
    document.querySelector(‘#root‘)
)

案例二

function Login() {
    return (
        <div>
            <h1>欢迎登录</h1>
        </div>
    )
}

function LoginNeed() {
    return (
        <div>
            <h1>请先登录</h1>
        </div>
    )
}

class HelloWorld extends React.Component{
    constructor(props) {
        super(props)
        this.state = {
            isLogin:true
        }
    }
    render() {
        let element = null
        if(this.state.isLogin){
            element = <Login />
        }else{
            element = <LoginNeed />
        }
        return (
            <div>
                {element}
            </div>
        )
    }
}

ReactDOM.render(
    <HelloWorld />,
    document.querySelector(‘#root‘)
)

案例一直接根据判断条件进行return,这样耦合性太强,而且很难增加新功能,

使用案例二这种将函数赋值给元素,大大提升了代码的复用性,而且可拓展能力加强

未完待续...

原文地址:https://www.cnblogs.com/asdaa/p/12393001.html

时间: 2025-01-09 00:47:47

React的条件渲染和列表渲染的相关文章

Vue学习计划(基础三)-class与style绑定,条件渲染和列表渲染

Class与style绑定.条件渲染和列表渲染 目标: 熟练使用class与style绑定的多种方式 熟悉v-if与v-for的用法,以及v-if和v-for一起使用的注意事项 class与style绑定的多种方式 绑定class和style都是使用v-bind也就是: 无论是绑定class还是style,都有两种方式,一种是对象,一种是数组. class和:class是共存的 绑定示例 1.class对象绑定 <!-- 根据isActivity的真假,判断是否应用activity这个class

微信小程序自学第五课:条件渲染、列表渲染

一.条件渲染 1. wx:if 在框架中,我们用 wx:if="{{condition}}" 来判断是否需要渲染该代码块: <view wx:if="{{condition}}"> True </view> 也可以用 wx:elif 和 wx:else 来添加一个 else 块: <view wx:if="{{length > 5}}"> 1 </view> <view wx:elif=

1.3 条件渲染、列表渲染

1. 条件渲染 1.1 条件渲染指令1) v-if 与 v-else 2) v-show 1.2 比较 v-if 与 v-show3) 如果需要频繁切换 v-show 较好 4) 当条件不成立时,v-if 的所有子节点不会解析(项目中使用) div id="demo"> <p v-if="ok">表白成功</p> <p v-else>表白失败</p> <hr> <p v-show="o

VUE:条件渲染和列表渲染

条件渲染 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!-- 1.条件渲染指令 v-if v-else 移除标签 v-show 通过样式隐藏 2.比较 v-if 与v-show 如果需要频繁切换 v-show 较好 --> <div id="

【WeChat 小程序】005 - 条件渲染以及列表渲染

条件渲染 1. 概念: 只有当条件成立时才渲染生成 2.wx:if属性的设置 示例代码: <text wx:if="{{thisWeekMovie.isHighlyRecommended}}">强烈推荐</text> 注:只有当thisWeekMovie.isHighlyRecommended为真时,界面元素才会被渲染 类似的:使用hidden属性也可以实现类似的效果,但元素总是会被生成,增大初始化开销 <text hidden="{{!this

React中条件渲染和循环

条件渲染 React 中的条件渲染和 JavaScript 中的一样,使用 JavaScript 运算符 if 或者条件运算符去创建元素来表现当前的状态,然后让 React 根据它们来更新 UI. 具体实现可以看下面的例子 1.在 src -> components 文件夹中,再新建 list.js ,具体代码如下: import React, { Component } from 'react'; class List extends Component { // 状态的初始化一般放在构造器中

【03】Vue 之列表渲染及条件渲染

3.1. 条件渲染 有时候我们要根据数据的情况,决定标签是否进行显示或者有其他动作.最常见的就是,表格渲染的时候,如果表格没有数据,就显示无数据.如果有数据就显示表格数据. Vue帮我们提供了一个v-if的指令,帮助我们完成判断的模板处理. <div id="app"> <h1 v-if="ok">Yes</h1> <h1 v-else>No</h1> </div> <!-- 当ok为tr

React:快速上手(3)——列表渲染

React:快速上手(3)——列表渲染 使用map循环数组 了解一些ES6 ES6, 全称 ECMAScript 6.0 ,是 JaveScript 的下一个版本标准,2015.06 发版.ES6 主要是为了解决 ES5 的先天不足,比如 JavaScript 里并没有类的概念,但是目前浏览器的 JavaScript 是 ES5 版本,大多数高版本的浏览器也支持 ES6,不过只实现了 ES6 的部分特性和功能. 详情查看菜鸟教程了解更多:http://www.runoob.com/w3cnote

vue列表渲染

1. v-for 遍历数组 //item=>值,index=>索引 <ul id="example-2"> <li v-for="(item, index) in items"> {{ index }} - {{ item.message }} </li> </ul> var example2 = new Vue({ el: '#example-2', data: { items: [ { message: