React——条件渲染

在React中,你可以创建各种不同的组件,然后根据应用的状态渲染出它们其中的一般部分。

一.用变量存储元素

可以将元素保存到一个变量中,通过为变量赋不同的值去渲染不同的元素

function LoginButton(props){
    return <button onClick={props.handleClick}>Login</button>
}
function LogoutButton(props){
    return <button onClick={props.handleClick}>Logout</button>
}
class LoginCtr extend React.Component{
    constructor(props){
        super(props);
        this.state={isLogin:false}
    }
    logOut(){
        this.setSate({
            isLogin:false
        })
    }
    logIn(){
        this.setState({
            isLogin:true
        });
    }
    render(){
        let button;
        if(this.state.isLogin){
            button = <LogoutButton handleClick={this.logOut.bind(this)}/>
        } else {
            button = <LogInButton handleClick={this.logIn.bind(this)}/>
        }
        return (<div>{button}</div>);
    }
};

二.阻止组件渲染

在少数情况下,你可能想让组件隐藏它自己而非被渲染到其他组件中,可以通过return null达到这种效果

function Waring(props){
    if(!props.waring){
       return null;
    }
    return <div>this is a waring</div>
}
class waringCtr extend React.Component{
    constructor(props){
        super(props);
        this.state = {hasWarn:false}
    }
    handle(){
        let hasWarn = this.state.hasWarn;
        hasWarn = !hasWarn;
        this.setState({
            hasWarn:hasWarn
        });
    }
    render(){
        return (
            <div>
                <button onClick={this.handle.bind(this)}>{this.state.hasWarn ? ‘hideWarn‘:‘showWarn‘}</button>
                <Waring waring={this.state.hasWarn}/>
            </div>
        )
    }
};

在组件的render方法中返回null,并不会影响组件生命周期函数的调用,所以Waring组件的componentWillUpdate方法和componentDidUpdate方法还是会
被调用

时间: 2024-10-23 11:25:48

React——条件渲染的相关文章

2017.11.7 ant design - upload 组件的使用, react 条件渲染以及 axios.all() 的使用

一.主要任务:悉尼小程序管理后台,添加景点页面的开发 二.所遇问题及解决 1. 上传多个不同分类音频信息时,如中文音频和英文音频,要求音频不是放在一个数组中的,每个音频是一个独立的字段,此时: <Upload action="/hserve/v2/file/upload/" // 必选参数,上传的地址: listType="picture" // 上传列表的内建样式,这个不是很明白 text.picture.picture-card 之间的区别,默认值为 te

前端React 条件渲染

React 条件渲染 在 React 中,你可以创建不同的组件来封装各种你需要的行为.然后还可以根据应用的状态变化只渲染其中的一部分. React 中的条件渲染和 JavaScript 中的一致,使用 JavaScript 操作符 if 或条件运算符来创建表示当前状态的元素,然后让 React 根据它们来更新 UI. 先来看两个组件: function UserGreeting(props) { return <h1>欢迎回来!</h1>; } function GuestGree

React 条件渲染简单演示

模拟根据登录情况判断要显示的欢迎界面 import React, { Component } from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import * as serviceWorker from './serviceWorker'; import PropTypes from 'prop-types'; function Greeting(prop

详解React 的几种条件渲染以及选择

对于一个展示页面来讲, 通常有好几种展示状态(以列表页为例): 数据为空, 空页面 取数据时发生错误, 错误页面 数据正常 加载状态 针对以上三种情况, react渲染列表的时候要正确判断并渲染出相应的视图, 也就是条件渲染. 不同于vue的v-if, v-show等框架提供的api, react的条件渲染都是js原生的再加上一点点的hack. 比如react文档提到的. if/else, && 和三目等等. 当然上面的都是常用的一些方法, 但是也存在着各种问题, 比如条件分支过多的的事时

React学习:条件渲染

在react中的条件渲染和Vue不一样,react使用的是:使用不同的组件进行封装,然后根据使用的场景再来判断使用哪一个组件 React中的条件渲染和js中的一样,使用js或者其他条件运算符进行不同组件的渲染 1.元素变量 可以使用变量来储存元素. 它可以帮助你有条件地渲染组件的一部分,而其他的渲染部分并不会因此而改变. //元素变量 function LoginButton(props) { return ( <button onClick={props.onClick}> Login &l

React官方文档学习记录(四)- 条件渲染

一点点记录,建议需要学习React的移步官方文档去学习. 在React中,你可以创建一个清晰(distinct)的组件来简要描述你现在需要的东西.然后,你只需要使用你应用中的state来渲染它们. React中的条件型渲染跟JavaScript中的条件运算符运行方式差不多.好像就是使用JavaScript中的if或者三元运算符创建元素来显示现在的状态,然后让React更新UI来匹配这些修改. 下面这个例子就是根据不同的isLoggedIn进行不同的欢迎. 1 2 3 4 5 6 7 8 9 10

React中条件渲染和循环

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

React中条件渲染

17==> 条件渲染 state初始化一般写在构造器当中 CharShop.js如下 import React, { Component } from "react"; export default class CharShop extends Component { // state初始化一般写在构造器当中 constructor(props){ super(props); this.state={ goods: [{ id: 1, text: "web111&quo

React的条件渲染和列表渲染

React事件 特点:1/react事件,绑定事件的命名,驼峰命名法.2/{},传入1个函数,而不是字符串 <button onClick={this.sendData}>传递helloworld给父元素</button> 事件对象:React返回的事件对象是代理的原生的事件对象,如果想要查看事件对象的具体值,必须之间输出事件对象的属性. 注意:原生,阻止默认行为时,可以直接返回return false:React中,阻止默认必须e.preventDefault(); React事