React学习:条件渲染

原创 2018年04月15日 00:58:03

React 中的条件渲染就和在 JavaScript 中的条件语句一样。通过 JavaScript 条件操作符(如 if ) 根据不同的条件 来决定创建渲染不同的元素,并且让 React 更新匹配的 UI 。

仔细阅读代码,你会发现这一章对你收获最大的是怎么让代码写的更简单优雅。


一、怎么用

看下面dome就懂了,顺便看看我们 在多个页面写react 与 在一个页面写react的区别

例:多个页面

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

App.js

import React, { Component } from 'react';
import Greeting from './Greeting';

class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      isLoggedIn:false
    };
  }
  handle = () => {
    this.setState(prevState => ({
      isLoggedIn: !prevState.isLoggedIn
    }));
  }
  render(){  
    let isLoggedIn = this.state.isLoggedIn;
    return (
      <div>
        <Greeting isLoggedIn={isLoggedIn} name={'bty'}/>
        <button onClick={this.handle}>
          {isLoggedIn ? '退出登录' : '登录'}
        </button>
      </div>
    );
  }
}

export default App;

Greeting.js

import React, {Component} from 'react';

class Greeting extends Component{
    render(){
        let isLoggedIn = this.props.isLoggedIn;
        return (
            <div>
                {isLoggedIn ? 
                    ('welcome you ,' + this.props.name + '!' )
                    :'please login!'
                }
            </div>
        );
    }
}
export default Greeting;

执行效果:
这里写图片描述
点击“登陆”后(再点击“退出登录”又回到上面图的样子)
这里写图片描述

例:一个页面

这是官网上的例子,但是仔细阅读代码你会发现里面代码太废话,完全可以像上面一样简化代码,写的更优雅。

class LoginControl extends React.Component {
  constructor(props) {
    super(props);
    this.handleLoginClick = this.handleLoginClick.bind(this);
    this.handleLogoutClick = this.handleLogoutClick.bind(this);
    this.state = {isLoggedIn: false};
  }

  handleLoginClick() {
    this.setState({isLoggedIn: true});
  }

  handleLogoutClick() {
    this.setState({isLoggedIn: false});
  }

  render() {
    const isLoggedIn = this.state.isLoggedIn;

    let button = null;
    /*  实际这么写太废话了,不如看看我上面自己写的,
      代码简化了很多
    */
    //不同的条件,渲染不同的组件
    if (isLoggedIn) {
      //用变量来存储react元素
      button = <LogoutButton onClick={this.handleLogoutClick} />;
    } else {
      button = <LoginButton onClick={this.handleLoginClick} />;
    }

    return (
      <div>
        <Greeting isLoggedIn={isLoggedIn} />
        {button}
      </div>
    );
  }
}

function UserGreeting(props) {
  return <h1>welcome you ,{props.name}</h1>;
}

function GuestGreeting(props) {
  return <h1>please login!</h1>;
}

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <UserGreeting name={'bty'}/>;
  }
  return <GuestGreeting />;
}

function LoginButton(props) {
  return (
    <button onClick={props.onClick}>
      Login
    </button>
  );
}

function LogoutButton(props) {
  return (
    <button onClick={props.onClick}>
      Logout
    </button>
  );
}

ReactDOM.render(
  <LoginControl />,
  document.getElementById('root')
);

执行效果:同上


二、内联 if 用法

1、boolean && expression

我们可以 在JSX中嵌入任何表达式 ,方法是将表达式包裹在 {} 中。

下面表达式可以正常运行,是因为在 JS 中, true && expression 总是会评估为 expression ,而 false && expression 总是执行为 false 。
因此,如果条件为 true ,则 && 后面的元素将显示在输出中。 如果是 false,React 将会忽略并跳过它。

function Mailbox(props) {
  const unreadMessages = props.unreadMessages;
  return (
    <div>
      <h1>Hello!</h1>
      {unreadMessages.length > 0 &&
        <h2>
          You have {unreadMessages.length} unread messages.
        </h2>
      }
    </div>
  );
}

const messages = ['React', 'Re: React', 'Re:Re: React'];
ReactDOM.render(
  <Mailbox unreadMessages={messages} />,
  document.getElementById('root')
);

输出:
Hello!
You have 3 unread messages.

2、condition ? true : false

使用 JavaScript 的条件操作符 condition ? true : false

小技巧:可以这些写,来简化代码
let boolean = true; let a = !boolean;
效果等价于 let boolean = true; let a = boolean ?false : true;

在下面这个例子中,我们使用它来进行条件渲染一个小的文本块:

render() {
  const isLoggedIn = this.state.isLoggedIn;
  return (
    <div>
      The user is <b>{isLoggedIn ? 'currently' : 'not'}</b> logged in.
    </div>
  );
}

它也可以用于更大的表达式,虽然不太明显发生了什么:

render() {
  const isLoggedIn = this.state.isLoggedIn;
  return (
    <div>
      {isLoggedIn ? (
        <LogoutButton onClick={this.handleLogoutClick} />
      ) : (
        <LoginButton onClick={this.handleLoginClick} />
      )}
    </div>
  );
}

三、防止组件渲染

有时,你可能希望隐藏某个组件,即使它是由另一个组件渲染的。
为此,我们可以return null,而不是其渲染输出。

从组件的 render 方法返回 null 不会影响组件生命周期方法的触发。 例如, componentWillUpdate 和 componentDidUpdate 仍将被调用。

在下面的例子中,根据名为warn的 prop 值,呈现 < WarningBanner/> 。如果 prop 值为 false ,则该组件不渲染:

function Warning(props){
  if(!props.warn){
    return null;
  }
  return <div className='warning'>
    Warning!
  </div>;
}

class Page extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      showWarning:true
    };
  }
  handle = () => {
    this.setState(prevState => ({
      showWarning:!prevState.showWarning
    }));
  }
  render(){
    let showWarning = this.state.showWarning;
    return(
      <div>
        <Warning warn={showWarning} />
        <button onClick={this.handle}>
          {showWarning ? 'Hide' : 'Show'}
        </button>
      </div>
    );
  }  
}

ReactDOM.render(
  <Page />,
  document.getElementById('root')
);
/* css */
.warning {
  background-color: red;
  text-align: center;
  width: 100%;
  padding: 10px;
  color: white;
}

输出结果:
这里写图片描述
点击Hide后
这里写图片描述
再点击show又回到第一张图

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/b954960630/article/details/79946088

React条件渲染的方式

React 中的条件渲染有以下几种方式: if 语句 三元操作符(ternary operator) 逻辑 &amp;amp;&amp;amp; 操作符 switch.. case.. 语句 枚举...
  • AliceWu_1111
  • AliceWu_1111
  • 2018-03-14 10:59:47
  • 57

React中的条件渲染

React 中的条件渲染有以下几种方式: if 语句三元操作符(ternary operator)逻辑 && 操作符switch.. case.. 语句枚举(enums)多层条件渲染(multi...
  • hsany330
  • hsany330
  • 2017-10-10 14:02:58
  • 599

react条件渲染

条件渲染 元素变量 声明一个变量,用if判断该变量需要赋值的组件 let button = null; if (isLoggedIn) { button = L...
  • u010977147
  • u010977147
  • 2017-09-13 15:56:50
  • 117

React 条件渲染 if

{false} Document
  • qq_34351732
  • qq_34351732
  • 2017-11-17 21:04:41
  • 60

React学习之条件视图渲染(六)

1.条件化视图渲染的必要性当你创建不同的组件的时候,可能需要通过你的应用state的数据来显示数据class Creeting extends React.Component{ constru...
  • qq_18661257
  • qq_18661257
  • 2017-03-16 22:39:18
  • 774

浏览器的渲染(为什么说React更优)

React降低reflow与repaint次数. 到底为什么,看看下面浏览器的渲染原理.相信会有很大的收获,但是文章都比较长,要有耐心看噢. 看完绝对受益匪浅,而且能够更好的理解更多东西的工作原理. ...
  • harrison2010
  • harrison2010
  • 2017-08-31 22:50:37
  • 209

React.js 官网资料摘记:条件渲染

主要是使用条件进行判断。
  • YQXLLWY
  • YQXLLWY
  • 2017-06-19 14:09:13
  • 648

React-(if)条件渲染-condition

概述: 在React中,你封装很多基础组件,但是你是有选择使用特定的组件,这时候就需要依赖应用的状态,类似javaScript中if 1.例子: //定义基础组件 function Orange(){...
  • m0_37355951
  • m0_37355951
  • 2017-06-04 12:50:06
  • 4907

react条件样式

react条件样式
  • web_longboss
  • web_longboss
  • 2017-12-25 17:28:56
  • 124

深入理解React Native页面构建渲染原理

前言React Native 是最近非常火的一个话题,因为它的语法简介,跨平台等特性,赢得了各大平台的青睐,虽然前期是有一些坑。基本概念解释React 是一套可以用简洁的语法高效绘制 DOM 的框架,...
  • xiangzhihong8
  • xiangzhihong8
  • 2017-01-14 11:21:12
  • 13475
收藏助手
不良信息举报
您举报文章:React学习:条件渲染
举报原因:
原因补充:

(最多只允许输入30个字)