条件渲染和列表渲染

一、条件渲染

  条件渲染较简单,使用 JavaScript 操作符 if 或条件运算符来创建表示当前状态的元素,然后让 React 根据它们来更新 UI。

  贴一个小栗子:

function UserGreeting(props) {
return <h1>欢迎回来!</h1>;
} function GuestGreeting(props) {
return <h1>请先注册。</h1>;
} function Greeting(props) {
const isLoggedIn = props.isLoggedIn;
if (isLoggedIn) {
return <UserGreeting />;
}
return <GuestGreeting />;
} ReactDOM.render(
// 尝试修改 isLoggedIn={true}:
<Greeting isLoggedIn={false} />,
document.getElementById('example')
);

  当然,得益于 jsx 的语法,我们可以用变量来缓存元素或者组件:

function UserGreeting(props) {
return <h1>欢迎回来!</h1>;
} function GuestGreeting(props) {
return <h1>请先注册。</h1>;
} function Greeting(props) {
const isLoggedIn = props.isLoggedIn;
if (isLoggedIn) {
return <UserGreeting />;
}
return <GuestGreeting />;
} function LoginButton(props) {
return (
<button onClick={props.onClick}>
登陆
</button>
);
} function LogoutButton(props) {
return (
<button onClick={props.onClick}>
退出
</button>
);
} 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('example')
);

  阻止渲染的栗子:

function WarningBanner(props) {
if (!props.warn) {
return null; // 必须写 null,不写运行会报错
} return (
<div className="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 ? '隐藏' : '显示'}
</button>
</div>
);
}
} ReactDOM.render(
<Page />,
document.getElementById('example')
);

注意:组件的 render 方法返回 null 并不会影响该组件生命周期方法的回调。例如,componentWillUpdate 和 componentDidUpdate 依然可以被调用。

二、列表渲染

  列表渲染可以使用 js 中的 .map() 来进行。(map 返回一个经过逻辑处理的新数组)

function NumberList(props) {
const numbers = props.numbers;
const listItems = numbers.map((number) =>
<li key={number.toString()}>
{number}
</li>
);
return (
<ul>{listItems}</ul>
);
} const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
<NumberList numbers={numbers} />,
document.getElementById('example')
);

  和 vue 相同,需要给每个列表元素绑定一个 key,便于 React 识别哪些元素发生了变化。

function ListItem(props) {
return <li>{props.value}</li>;
} function NumberList(props) {
const numbers = props.numbers;
const listItems = numbers.map((number) =>
<ListItem key={number.toString()} value={number} />
);
return (
<ul>
{listItems}
</ul>
);
} const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
<NumberList numbers={numbers} />,
document.getElementById('example')
);

注意:key 会作为给 React 的提示,但不会传递给组件,因此,组件并不会知道传递给它的 key。

  在 jsx 中使用 map():

function ListItem(props) {
return <li>{props.value}</li>;
} function NumberList(props) {
const numbers = props.numbers;
return (
<ul>
{numbers.map((number) =>
<ListItem key={number.toString()}
value={number} />
)}
</ul>
);
} const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
<NumberList numbers={numbers} />,
document.getElementById('example')
);

  对比一下,只是少了声明 listItems 语句,并把后面的 map() 搬到 jsx 中。

react 入坑笔记(五) - 条件渲染和列表渲染的更多相关文章

  1. react 入坑笔记(四) - React 事件绑定和传参

    React 事件处理 建议:在了解 js 的 this 取值后食用更佳. 一.react 与 Html 中用法的异同和注意点 html 中的绑定事件的写法: <button onclick=&q ...

  2. react 入坑笔记(六) - 组件的生命周期

    React 组件生命周期 详细参考: react 组件生命周期 组件的生命周期可分为三个状态: 1.Mounting:已经挂载/插入到真实 DOM 树上: 2.Updating:正在被重新渲染: 3. ...

  3. react 入坑笔记(三) - Props

    React Props props - 参数. 组件类 React.Component 有个 defaultProps 属性,以 class xxx extend React.Component 形式 ...

  4. react 入坑笔记(二) - State

    React State 一. state 大致思想:在 react 中,每个组件都是一个状态机,通过与用户的交互,实现不同状态,然后渲染 UI,让用户界面和数据保持一致.React 里,只需更新组件的 ...

  5. react 入坑笔记(一)

    一些概念: 1.组件:概念等同于 vue 中的组件,字面意思,不过 vue 中组件是以 .vue 结尾,通过 vue-loader 编译成 js,而 react 组件就是 js. 2.jsx:js 语 ...

  6. es6 入坑笔记(五)

    Symbol 主要用做key或私有变量,Symbol是唯一的不可重复的,也是一个单独的数据类型 定义形式: let demo=Symbol("aaaa"); 1.Symbol不能使 ...

  7. oracle入坑日记<五>数据表

    1   数据表 1.1.数据表是存放数据字段信息的地方:在Oracle,数据表拥有者单位是用户,同时数据表属于表空间.如: 登录my_user用户在orcl表空间下创建的表就是 my_user用户在o ...

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

    Class与style绑定.条件渲染和列表渲染 目标: 熟练使用class与style绑定的多种方式 熟悉v-if与v-for的用法,以及v-if和v-for一起使用的注意事项 class与style ...

  9. 【Vue】Vue框架常用知识点 Vue的模板语法、计算属性与侦听器、条件渲染、列表渲染、Class与Style绑定介绍与基本的用法

    Vue框架常用知识点 文章目录 Vue框架常用知识点 知识点解释 第一个vue应用 模板语法 计算属性与侦听器 条件渲染.列表渲染.Class与Style绑定 知识点解释 vue框架知识体系 [1]基 ...

随机推荐

  1. zookeeper的原理,5分钟了解zookeeper

    一 .Zookeeper功能简介 ZooKeeper 是一个开源的分布式协调服务,由雅虎创建,是 Google Chubby 的开源实现.分布式应用程序可以基于 ZooKeeper 实现诸如数据发布/ ...

  2. 安装NVIDIA

    安装NVIDIA显卡驱动 $ ubuntu-drivers devices; $ sudo apt install nvidia-340 (安装指定版本) 重启系统: $ nvidia-smi (查看 ...

  3. IOException: Sharing violation on path *****

    Unity代码中删除文件或者文件夹时,可能会报这个错.翻译成白话文就是:你在其它地方打开了这个文件/文件夹   把打开的地方关了就是了.

  4. kafka原理和实践(三)spring-kafka生产者源码

    系列目录 kafka原理和实践(一)原理:10分钟入门 kafka原理和实践(二)spring-kafka简单实践 kafka原理和实践(三)spring-kafka生产者源码 kafka原理和实践( ...

  5. Item 21: 比起直接使用new优先使用std::make_unique和std::make_shared

    本文翻译自modern effective C++,由于水平有限,故无法保证翻译完全正确,欢迎指出错误.谢谢! 博客已经迁移到这里啦 让我们先从std::make_unique和std::make_s ...

  6. 八、xadmin自定义菜单栏顺序

    xadmin默认是读取注册的app和所有注册到xadmin的mode来生成对应的菜单. nav_menu[app_key] = { 'title': app_title, 'menus': [mode ...

  7. 一些leetcode算法题

    DFS算法 思想:一直往深处走,直到找到解或者走不下去为止 DFS(dep,...) // dep代表目前DFS的深度 { if (找到解或者走不下去了){ return; } 枚举下种情况,DFS( ...

  8. Python-类的特性(property)

    什么是特性property property是一种特殊的属性,访问它时会执行一段功能(函数)然后返回值 例一:BMI指数(bmi是计算而来的,但很明显它听起来像是一个属性而非方法,如果我们将其做成一个 ...

  9. Centos下启动和关闭MySQL

    https://blog.csdn.net/gghh2015/article/details/78281585

  10. python3 selenium webdriver 元素定位xpath定位骚操作

    源文http://www.cnblogs.com/qingchunjun/p/4208159.html By.xpath() 这个方法是非常强大的元素查找方式,使用这种方法几乎可以定位到页面上的任意元 ...