在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. Python cffi学习(二)

    上篇文章中讲到Python中调用外部c文件可以有两种方法,一是使用cffi.verify()的形式使用,但是该种方式仍然需要进行函数声明.二是将外部c文件编译成为函数库,然后通过cffi进行使用. 由 ...

  2. MAC OS X&Vmware

    推出共享文件恢复解决办法: 将/Volumes/VMware shared Folders 文件删除(此时这个文件中的内容为乱码) ,生成一个 VMware shared Folders文件夹,重新设 ...

  3. 阻塞队列(BlockingQueue)

    阻塞队列是 java.util.concurrent 包提供的一个类,该类提供了多线程中通过队列实现安全高效的数据处理的功能. 所谓阻塞队列,是在普通队列基础上实现了阻塞线程的功能: 队列为空时,获取 ...

  4. 减小ipa包大小

    1.删除不用的文件和图片 2.打release模式 3.色调单一图片采用8-bit的,对32-bit的图片采用压缩 4.对音视频采用aac压缩

  5. 初学Vue 遇到Module not found:Error:Can`t resolve 'less-loader' 问题

    学习vue时,导入一个子组件时遇到Module not found:Error:Can`t resolve 'less-loader' 问题,实际上时在子组件中的样式里加了这么个代码 <styl ...

  6. java框架之SpringBoot(11)-缓存抽象及整合Redis

    Spring缓存抽象 介绍 Spring 从 3.1 版本开始定义了 org.springframework.cache.Cache 和 org.springframework.cache.Cache ...

  7. php判断是否为命令行模式

    function is_cli(){ : ; }

  8. 关于.net里面的静态html页面和接口组合使用的网站

    在网站的根目录下,主要有三部分组成.①接口里面的bin文件夹②接口③html里面的页面. html里面有ajax请求接口的js代码.另外接口里面的web.config不需要拷贝到网站根目录去. 如下截 ...

  9. jQuery实现购物车物品数量的加减

    基于jquery的一款代码,实现购物车数据的加减,在淘宝网.京东商城购物时时经常见到的一个功能,点击文本框两侧的“+”与“-”,就可以增加或减少文本框内的数字值,每次步长为1,当然这个是可以自己设置的 ...

  10. Hdu2033 人见人爱A+B (贪心)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2033 人见人爱A+B Time Limit: 2000/1000 MS (Java/Others)   ...