在React中,你可以创建不同的组件各自封装你需要的东西。之后你可以只渲染其中的一部分,这取决于应用的state(状态)。

条件渲染在React里就和js里的条件语句一样。使用js里的if或者条件表达式创建元素来显示当前的状态,然后让React来更新UI。

看看下面两个组件:

function UserGreeting(props) {
return <h1>Welcome back!</h1>;
} function GuestGreeting(props) {
return <h1>Please sign up.</h1>;
}
我们将创建一个Greeting组件,它会根据用户是否登录而显示其中的一个组件:
function Greeting(props) {
const isLoggedIn = props.isLoggedIn;
if (isLoggedIn) {
return <UserGreeting />;
}
return <GuestGreeting />;
} ReactDOM.render(
// Try changing to isLoggedIn={true}:
<Greeting isLoggedIn={false} />,
document.getElementById('root')
);

在CodePen里试一试

根据isLoggedIn属性值得不同这个例子会渲染不同的问候语。

元素变量

你可以使用变量来储存元素。这样你可以根据条件来渲染你所需的组件的一部分而输出的其他部分都不会改变。

看看这两个登出和登入按钮的组件:

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

下面这个例子里,我们会创建一个有状态的组件叫LoginControl。

根据当前状态它会渲染<LoginButton />或者<LogoutButton />。它也会渲染一个<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) {
button = <LogoutButton onClick={this.handleLogoutClick} />;
} else {
button = <LoginButton onClick={this.handleLoginClick} />;
} return (
<div>
<Greeting isLoggedIn={isLoggedIn} />
{button}
</div>
);
}
} ReactDOM.render(
<LoginControl />,
document.getElementById('root')
);

在CodePen里试一试

声明一个变量并且使用if语句是一个条件渲染组件的好方法,有时你可能想用一个更简短的语法。在JSX里有很多方法来在行间使用条件,请往下面看相关介绍。

行内条件使用&&操作符

也许你会通过将表达式包在花括号里在JSX里嵌入表达式。这就包括了使用js里的&&操作符。这样可以很方便的来表示元素渲染的条件:

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')
);

在CodePen里试一试

在js里,true && expression的结果总会是expression,false && expression的结果总会是false。

因此,如果条件是true,在&&右边的元素就会在输出里。如果条件是false,React就会忽略它。

行内条件使用三目运算符

另外一个方法来条件渲染元素就是在行间使用js三目运算符condition ? true : false。

下面这个例子,我们使用三目运算符来条件渲染一个小块文本。

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>
);
}

就像在js里一样,这取决于你选择一个合适的风格基于你和你的团队觉得哪一种可读性好。但也要记得无论何时状况变得太复杂,那最好去从中提取组件。

阻止组件渲染

有一些情况也许你希望一个组件隐藏起来即使它依靠别的组件渲染。想要隐藏它就返回null作为输出而不是渲染输出。

下面这个例子,<WarningBanner />依赖于prop的值warn来渲染。如果prop的值是false,组件就不会渲染:

function WarningBanner(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}
this.handleToggleClick = this.handleToggleClick.bind(this);
} handleToggleClick() {
this.setState(prevState => ({
showWarning: !prevState.showWarning
}));
} render() {
return (
<div>
<WarningBanner warn={this.state.showWarning} />
<button onClick={this.handleToggleClick}>
{this.state.showWarning ? 'Hide' : 'Show'}
</button>
</div>
);
}
} ReactDOM.render(
<Page />,
document.getElementById('root')
);
组件的render方法返回null不会影响组件的生命周期方法的运行。比如,componentWillUpdate和componentDidUpdate将一直被调用。

React文档(八)条件渲染的更多相关文章

  1. React文档(十三)思考React

    在我们的看来,React是使用js创建大型快速网站应用的首要方法.它在Facebook和Instagram的使用已经为我们展现了它自己. React的一个很好的地方就在于当你创建应用的时候它使你思考如 ...

  2. MongoDB 教程(八):查询文档、条件操作符

    MongoDB 查询文档 MongoDB 查询文档使用 find() 方法. find() 方法以非结构化的方式来显示所有文档. MongoDB 查询数据的语法格式如下: db.collection. ...

  3. React文档(二十四)高阶组件

    高阶组件(HOC)是React里的高级技术为了应对重用组件的逻辑.HOCs本质上不是React API的一部分.它是从React的组合性质中显露出来的模式. 具体来说,一个高阶组件就是一个获取一个组件 ...

  4. React文档(一)安装

    React是一个灵活的可以用于各种不同项目的框架,你可以用它来写新应用,你也可以逐步将它引进已有的代码库而不用重写整个项目. 试用React 如果你想玩一玩React,那么就去CodePen上试一试. ...

  5. react文档demo实现输入展示搜索结果列表

    文档页面地址:https://doc.react-china.org/docs/thinking-in-react.html 该文档只给了具体实现思路,下面是我实现的代码. 初学react,如果有写的 ...

  6. React文档总结

    元素渲染 更新元素渲染 计时器例子 function tick(){ const element = ( <div> <h1>Hello, World!</h1> ...

  7. React文档(十八)最佳性能

    在内部,React使用好几种聪明的技巧去最小化更新UI所需要的DOM操作.对于很多应用来说,使用React会使得构建用户界面非常之快而且不需要做太多专门的性能优化.虽然如此,还是有一些方法可以让你为R ...

  8. React文档(四)渲染元素

    元素是React应用的最小单位. 一个React元素描述了你在屏幕上所看到的东西: const element = <h1>Hello, world</h1>; 和浏览器页面中 ...

  9. React文档(十六)refs和DOM

    Refs 提供了一种方式,用于访问在 render 方法中创建的 DOM 节点或 React 元素. 在标准的React数据流中,props是使得父组件和子组件之间交互的唯一方式.你通过props重新 ...

随机推荐

  1. POJ3461 Oulipo 字符串

    正解:kmp/哈希 解题报告: 传送门! 这题其实就kmp板子,,,用来复习下kmp的太久没打了QAQ 所以kmp做法就不港了放个代码就是了QAQ #include<algorithm> ...

  2. 【Python全栈-后端开发】Django进阶1-分页

    Django[进阶篇-1 ]分页 分页 一.Django内置分页 from django.core.paginator import Paginator, EmptyPage, PageNotAnIn ...

  3. 17.4-uC/OS-III消息管理(任务消息队列使用)

    任务消息队列跟任务信号量一样,均隶属于某一个特定任务, 不需单独创建,任务在则在, 只有该任务才可以接收这个任务消息队列的消息,其他任务只能给这个任务消息队列发送消息, 却不能接收.任务消息队列与(普 ...

  4. 17.1-uC/OS-III消息管理(两种消息队列)

    1.使用消息队列 消息队列函数: 函数名 功能 OSQCreate() 创建一个消息队列 OSQDel() 删除一个消息队列 OSQFlush() 清空一个消息队列 OSQPend() 任务等待消息 ...

  5. Ubuntu上Qt+Tcp网络编程之简单聊天对话框

    首先看一下实现结果: >>功能: (1)服务器和客户端之间进行聊天通信: (2)一个服务器可同时给多个客户端发送消息:(全部连接时)   也可以只给特定的客户端发送消息:(连接特定IP) ...

  6. redis发布订阅、事务、脚本

    Redis 发布订阅 Redis 发布订阅(pub/sub)是一种消息通信模式:发送者(pub)发送消息,订阅者(sub)接收消息. Redis 客户端可以订阅任意数量的频道. 下图展示了频道 cha ...

  7. Ch03 数组相关操作 - 练习

    1. 编写一段代码,将a设置为一个n个随机数的数组,要求随机数介于0(包含)和n(不包含)之间. //import java.lang.Math def getArray(n:Int)={   val ...

  8. 利用tcp三次握手,使用awl伪装MAC地址进行多线程SYN洪水攻击

    SYN洪水攻击概述:SYN洪水攻击主要源于: tcp协议的三次握手机制tcp协议面向链接的协议SYN洪水攻击的过程:在服务端返回一个确认的SYN-ACK包的时候有个潜在的弊端,如果发起的客户是一个不存 ...

  9. CSS组合选择符

    组合选择符说明了两个选择器直接的关系. 目录: 后代选取器(以空格分隔) 子元素选择器(以大于号分隔) 相邻兄弟选择器(以加号分隔) 普通兄弟选择器(以破折号分隔) 后代选取器 后代选取器匹配所有值得 ...

  10. smtplib.SMTPDataError: (554, b'DT:SPM 163……)

    1.报错535: 未将POP3/SMTP服务开启.通过在163邮箱内 设置 获取授权码  打开,通过授权码可以进行第三方登录.此处的Password填写授权码. 2.报错554: 第一种情况:缺失发件 ...