如果要渲染一组数组 应该使用数组的map方法

注意:渲染列表时候添加key属性 key属性的值要保持唯一

原则:map()遍历谁 就给谁添加key属性

尽量避免索引号作为key

//导入react
import React from "react" import ReactDOM from "react-dom" //第一步创建jsx创建react元素 // const fangfang=<p>我是方方</p>
// const name="geyao"
// const sayHi=()=>"geyao"
// const title =(<h1>
// <p className={{color:"red"}}>hello {name}</p>
// <p>{sayHi()}</p>
// <p>{1}</p>
// {fangfang}
// </h1>)
const songs=[
{id:1,name:"geyao"},
{id:2,name:"fangfang"},
{id:1,name:"nannan"}
]
const isLoading=true
const lodingData=()=>{
if(isLoading){
return <div>loading...</div>
}
return <div>数据加载完成,此处显示加载后的数据</div>
}
const list=(
<ul>
{songs.map(item=>(<li key={item.id}>{item.name}</li>))}
</ul>
)
const title=(
<div>
条件渲染:
{lodingData()}
{list}
</div> )
//第二步渲染React元素
ReactDOM.render(title,document.getElementById("root"))

运行结果

好客租房16-jsx中的列表渲染的更多相关文章

  1. 3-7 Vue中的列表渲染

     举个案例:循环data中的list的值在div中,并显示相应的index值. 关于数组的循环: //显示效果如下图: //一般的列表渲染最好带一个key值,要把key值设置为唯一值的话,可以选择in ...

  2. 好客租房41-react组件基础综合案例-渲染列表数据

    1渲染列表 在state定义数据 进行数据渲染 //导入react import React from 'react' import ReactDOM from 'react-dom' //导入组件 ...

  3. 好客租房42-react组件基础综合案例-渲染列表无数据并优化

    渲染列表评论 1判断列表数据的长度是否为0 2如果为0 则渲染暂无评论 //导入react import React from 'react' import ReactDOM from 'react- ...

  4. 好客租房15-jsx中的条件渲染

    jsx中的条件渲染 场景:loding效果 条件渲染:根据条件渲染特定的jsx结构 可以使用if/else或者三元运算符和逻辑和运算符实现 //导入react import React from &q ...

  5. React 学习(五) ---- 条件和列表渲染

    条件渲染 React中的条件渲染和我们平常写的js 代码一样,都是用的if else, 只不过在if else 中它的返回值是jsx, 根据不同的条件渲染不同的UI. 先写两个组件 //登录的用户显示 ...

  6. react 也就这么回事 02 —— JSX 插值表达式、条件渲染以及列表渲染

    我们已经学会了 React 创建元素和渲染元素 ReactDOM.render(<div>Hello React!</div>, document.getElementById ...

  7. 关于vue.js中列表渲染练习

    html: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8 ...

  8. Vue 列表渲染中的key

    首先看一下官网的论述: 当 Vue.js 用 v-for 正在更新已渲染过的元素列表时,它默认用“就地复用”策略.如果数据项的顺序被改变,Vue 将不会移动 DOM 元素来匹配数据项的顺序, 而是简单 ...

  9. 好客租房29-从jsx中抽离事件处理程序

    从jsx中抽离过多js逻辑代码 会显得非常混乱 推荐:将逻辑抽离到单独的方法中 保证jsx结构清晰 //导入react     import React from 'react'           ...

随机推荐

  1. Qunee for HTML5 v1.6新版本发布

    Qunee for HTML5 V1.6正式发布,修复了一些 BUG,增加了滚动条支持,改进了编辑器,增加了JSON 导入导出.告警冒泡.连线流动,UI 定制等扩展示例,欢迎 访问 导航面板 增加了滚 ...

  2. C#编写程序,用 while 循环语句实现下列功能

    编写程序,用 while 循环语句实现下列功能:有一篮鸡蛋,不止一个,有人两个两个数,多余一个,三个三个数,多余一个,再四个四个地数,也多余一个,请问这篮鸡蛋至少有多少个. 代码: using Sys ...

  3. PAT B1002写出这个数

    读入一个正整数 n,计算其各位数字之和,用汉语拼音写出和的每一位数字. 输入格式: 每个测试输入包含 1 个测试用例,即给出自然数 n 的值.这里保证 n 小于 1. 输出格式: 在一行内输出 n 的 ...

  4. CommonsCollection4反序列化链学习

    CommonsCollection4 1.前置知识 由于cc4没有新的知识点,主要是用cc2,然后稍微cc3结合了,所以我们可以看ysoserial源码,自己尝试构造一下,把cc2通过获取Invoke ...

  5. VUE3 之 使用 Mixin 实现代码的复用 - 这个系列的教程通俗易懂,适合新手

    1. 概述 老话说的好:舍得舍得,先舍才能后得. 言归正传,今天我们来聊聊 VUE 中使用 Mixin 实现代码的复用. 2. Mixin 的使用 2.1 不使用 Mixin 的写法 <body ...

  6. vivo 短视频推荐去重服务的设计实践

    一.概述 1.1 业务背景 vivo短视频在视频推荐时需要对用户已经看过的视频进行过滤去重,避免给用户重复推荐同一个视频影响体验.在一次推荐请求处理流程中,会基于用户兴趣进行视频召回,大约召回2000 ...

  7. 如何用CSS实现左侧宽度固定,右侧自适应(两栏布局)?左右固定中间自适应(三栏布局)呢?

    在前端日常布局中,会经常遇到左侧宽度固定,右侧自适应或者左右两边固定,中间部分自适应的实用场景.本文例子中将列举出两种常用的两栏布局,左侧固定右侧自适应的常用方法以及代码和五种左右固定中间自适应的常用 ...

  8. crm单元测试使用

    Action使用 使用paramBag传递入参,填写入参名,入参值,后使用 serviceProvider传入插件. Assert.AreEqual(this.output["state&q ...

  9. Python脚本----打印菜单

    def print_menu(): """打印菜单""" print ("="*50) print ("1. ...

  10. Linux下编写和加载 .ko 文件(编写linux驱动)

    一..ko 文件介绍 .ko文件是kernel object文件(内核模块),该文件的意义就是把内核的一些功能移动到内核外边, 需要的时候插入内核,不需要时卸载. 二.优点 (1)这样可以缩小内核体积 ...