前端学习(2236):react的列表渲染二

import React from 'react';
import ReactDOM from 'react-dom';class Welcome extends React.Component {constructor(props) {super(props)this.state = {list: [{title: "第一节课",content: '时间'}, {title: "第一节课",content: '时间'}, {title: "第三节课",content: '时间'}, ]}}render() {/*  let listArr = [];for (let i = 0; i < this.state.list.length; i++) {let item = ( <li ><h3 > { this.state.list[i].title } </h3> <p > { this.state.list[i].content } </p> < /li >)listArr.push(item)} */let listArr = this.state.list.map((item, index) => {return ( <li key = "index" ><h3 > { index }: { item.title } </h3> <p > { item.content } < /p> < /li >)})console.log(listArr)return ( <div ><h1 >今天课程内容 </h1> <ul ><li > { listArr } <h3 >这是标题 </h3> <p > 内容 < /p> < /li > </ul> < /div > )}
}ReactDOM.render( < Welcome / > , document.querySelector("#root"))

运行结果

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/417433.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

win10 radmin远程不了_不用QQ也能电脑远程,win10这隐藏功能太良心了!真后悔发现太晚...

在工作中&#xff0c;我们难免会遇到一些棘手的电脑问题&#xff0c;自己搞定不了&#xff1f;那就找高手帮忙吧&#xff01;假若就在身旁还能帮上忙&#xff0c;但远在天边的又是鞭长莫及&#xff0c;这该如何是好呢&#xff1f;这时候大家都会想到QQ的远程功能。但经常用QQ远…

前端学习(2237):react实现疫情数据

import React from react; import ReactDOM from react-dom; import jsonData from ./code.jsonconsole.log(jsonData) let provinceObj {}/* let provinceObj{"广东省":{confirm:0,suspect:0,heal:0,deal:0}} */ jsonData.data.list.forEach((item, i) > {if (p…

jdbc mysql 存储过程查询数据_JDBC连接(MySql)数据库步骤,以及查询、插入、删除、更新等十一个处理数据库信息的功能。...

主要内容&#xff1a;JDBC连接数据库步骤。一个简单详细的查询数据的例子。封装连接数据库&#xff0c;释放数据库连接方法。实现查询&#xff0c;插入&#xff0c;删除&#xff0c;更新等十一个处理数据库信息的功能。(包括事务处理&#xff0c;批量更新等)把十一个功能都放在…

linux shell 用sed命令在文本的行尾或行首添加字符

from&#xff1a;http://www.cnblogs.com/aaronwxb/archive/2011/08/19/2145364.html 昨天写一个脚本花了一天的2/3的时间&#xff0c;而且大部分时间都耗在了sed命令上&#xff0c;今天不总结一下都对不起昨天流逝的时间啊~~~ 用sed命令在行首或行尾添加字符的命令有以下几种&…

linux 自动安装mysql_linux安装mysql教程

1.系统约定安装文件下载目录&#xff1a;/data/softwareMysql目录安装位置&#xff1a;/usr/local/mysql数据库保存位置&#xff1a;/data/mysql日志保存位置&#xff1a;/data/log/mysql执行如下命名&#xff1a;#mkdir /data/software#cd /data/software--下载安装包--建议&a…

密钥

【AES】 一种对称加密算法&#xff0c;DES的取代者。 加密相关文章见&#xff1a;Java 加密解密 对称加密算法 非对称加密算法 MD5 BASE64 AES RSA 【代码】 代码比较多&#xff0c;有一部分非本文章内容代码&#xff0c;具体自己看吧。 [java] view plaincopy print?package…

mysql复制安全性_从MySQL复制功能中得到一举三得实惠

在MySQL数据库中&#xff0c;支持单项、异步复制。在复制过程中&#xff0c;一个服务器充当主服务器&#xff0c;而另外一台服务器充当从服务器。如下图所示。此时主服务器会将更新信息写入到一个特定的二进制文件中。并会维护文件的一个索引用来跟踪日志循环。这个日志可以记录…

自定义安装mysql linux_linux下 安装mysql 问题

展开全部因为32313133353236313431303231363533e4b893e5b19e31333365633934mysql程序在启动的时候 非常依赖my.cnf里面的配置&#xff0c;而my.cnf文件中的配置&#xff0c;在执行mysql初始化的时候就可以手动指定。如果mysql不是使用yum安装&#xff0c;而是将mysql安装到自定…

前端学习(2244):计算器显示问题

<!DOCTYPE html> <html><head><meta charset"utf-8" /><title>奥里给&#xff01;</title><style type"text/css">.a {height: 100px;width: 450px;border: 3px solid black;background-color: beige;font-size…

MySQL索引原理及慢查询优化

MySQL凭借着出色的性能、低廉的成本、丰富的资源&#xff0c;已经成为绝大多数互联网公司的首选关系型数据库。虽然性能出色&#xff0c;但所谓“好马配好鞍”&#xff0c;如何能够更好的使用它&#xff0c;已经成为开发工程师的必修课&#xff0c;我们经常会从职位描述上看到诸…

C语言沉浸式刷题【C语言必刷题】

1.猜凶手 某地发生了一起谋杀案&#xff0c;警察通过排查确定杀人凶手必为四个嫌疑犯的一个&#xff0c;以下是4个嫌犯的供词。已知&#xff08;请编写代码找出凶手&#xff09; A说&#xff1a;不是我。 B说&#xff1a;是C。C说&#xff1a;是D。D说&#xff1a;C再胡说。 程…

python3 while循环语句_python While 循环语句

python While 循环语句发布时间&#xff1a;2018-02-12 16:46:28编辑&#xff1a;admin阅读(2055)python 编程中 while 语句用于循环执行程序&#xff0c;即在某条件下&#xff0c;循环执行某段程序&#xff0c;以处理需要重复处理的相同任务。其基本形式为&#xff1a;while 判…