前端学习(2235):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)}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/417438.shtml

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

相关文章

URL参数解析方法

这几天遇到这样一个需求&#xff0c;需要在不同页面之前传递参数&#xff0c;一般我们都是通过URL来传递&#xff0c;如下 window.open(test.html?id123&name456) 然后在新窗口的时候我们再用window.location.search方法获取?后面的参数内容&#xff0c;但是拿到的内容是…

webview代码实例化_WebView常用类和基本方法详解

上一篇文章我们实现了一个简单的WebView&#xff0c;并且能够在程序中的不调用浏览器进行网页的展示和浏览&#xff0c;Android给WebView提供了一些子类&#xff0c;其子类下的方法能够让我们的WebView功能更加完善、性能更加的强大&#xff0c;接下来我们就一起来学习WebView常…

TFS2010 删除工作区(同时删除工作区中所有的目录映射)

删除工作区 tf workspace /delete 工作区名;创建的用户 /server:TFS服务器 例tf workspace /delete WHQ-PC;whq /server:http://192.168.0.12:8080/tfs/defaultcollection注&#xff1a;该操作会同时删除工作区中所有的目录映射&#xff0c;所有项目需要重新映射。

Android pop3与imap方式接收邮件(javamail)

需要下载3个jar包&#xff1a;mail.jar/ activation.jar/ additionnal.jar 1.pop3 /*** 以pop3方式读取邮件&#xff0c;此方法不能读取邮件是否为已读&#xff0c;已经通过测试* */private void getEmail() {List<Map<String, Object>> list new ArrayList…

前端学习(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: "第三节…

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

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

js 获取url参数(QueryString)

/// <summary>/// 获取url参数/// 王洪岐/// </summary>function QueryString(fieldName) {var urlString document.location.search;if (urlString ! null) {var typeQu fieldName "";var urlEnd urlString.indexOf(typeQu);if (urlEnd ! -1) {var …

【dubbo】消费者Consumer搭建

一.consumer搭建&#xff08;可以web/jar&#xff09; 1.新建Maven项目&#xff0c;groupId&#xff1a;com.dubbo.consumer.demo artifactId:demo projectName:dubboo-consumer-demo 2.新建class &#xff1a;com.dubbo.consumer.demo.DemoAction package com.dubbo.consumer.…

js 获取某iframe中document,浏览器兼容

/// <summary>/// 获取iframe中document&#xff0c;浏览器兼容/// 王洪岐/// id:iframe的ID/// </summary>function getIFrameDOM(id) {return document.getElementById(id).contentDocument || document.frames[id].document; }

c# mysql executenonquery_C#中ExecuteNonQuery()返回值注意点分析

本文实例讲述了C#中ExecuteNonQuery()返回值注意点。对于C#数据库程序设计有一定的借鉴价值。分享给大家供大家参考之用。具体分析如下&#xff1a;首先&#xff0c;在查询某个表中是否有数据的时候&#xff0c;我们通常用ExecuteNonQuery()&#xff0c;并通过判断值是否大于0来…

前端学习(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…

数据库 数据库SQL语句五

集合运算union 并集&#xff08;两个集合如果有重复部分&#xff0c;那么只显示一次重复部分&#xff09; union all 并集&#xff08;两个集合如果有重复部分&#xff0c;那么重复部分显示两次&#xff09; intersect 交集 minus 差集--查询部门号是10和20号的员工信息 select…

SQLServer windows身份验证连接字符串

server.;databaseTest;Integrated SecurityTrue;

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

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

vue-router之路由属性配置说明

minix 是个什么东西&#xff0c; 就是混合&#xff0c;把你混合给我 浅显表述就是 你说 &#xff1a; ‘我叫李四’&#xff0c; 我说 &#xff1a; ‘我叫张三’&#xff0c; 然后把你 混合给我&#xff0c; 就成了 我说 &#xff1a; ‘我叫张三我叫李四’&#xff0c; 所…

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

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

lambda写法(多参数)

Lambda 表达式基本形式(input parameters) > expression< XMLNAMESPACE PREFIX "[default]" httpmsdnmicrosoftcommtps NS "http://msdn2.microsoft.com/mtps" />只有在 Lambda 有一个输入参数时&#xff0c;括号才是可选的&#xff1b;否则括号是…

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…

C# Repeater绑定显示数组

此处绑定的对象拥有string[] Contents属性&#xff0c;绑定时将Contents[0]和Contents[1]分别绑定<asp:Repeater runat"server" ID"rptDatabase"><ItemTemplate><li><a href"Database.aspx?id<%#Eval("Contents[0]&quo…