在组件的render函数中遍历数组menus[]并且要return返回虚拟Dom对象。

render() {
return createPortal(
this.state.visible &&
<div className={styles.modal}>
<div className={styles.content}>
<ul>
{this.props.menus.map((item,index)=>{
console.log(index,item.title);
return <li key={index}>{item.title}</li>
})}
</ul>
</div>
</div>, this.node
)
}

react动态生成列表的更多相关文章

  1. js动态生成数据列表

    我们通常会使用table标签来展示数据内容,由于需要展示的数据内容是随时更换的,所以不可能将展示的数据列表写死在html写死在页面中,而是需要我们根据后台传来的数据随时更换,这个时候就需要我们使用js ...

  2. Jquery解析Json字符串,并且动态生成数据表格Table

    //ajax获得后台传来的json字符串 $.post("UserInfo.ashx", function (data) { //假设data="{T1:[{User_I ...

  3. react将表格动态生成视频列表【代码】【案例】

    只需要创建一个表格,id为videos,react就能将这个表格转换成视频列表,并点击自动播放 index.html <!DOCTYPE html> <html> <he ...

  4. React通过dva-model-extend实现 dva 动态生成 model

    前言 实现通过单个component 单个router通过相应的标识对应产生不同model实现数据包分离,model namespce将会覆盖基础的Model,其中的model[state|subsc ...

  5. WijmoJS 中自定义 React 菜单和列表项模板

    WijmoJS 中自定义 React 菜单和列表项模板 在V2019.0 Update2 的全新版本中,React 框架下 WijmoJS 的前端UI组件功能再度增强. WijmoJS的菜单和类似列表 ...

  6. Aop动态生成代理类时支持带参数构造函数

    一.背景 在某些情况下,我们需要植入AOP代码的类并没有默认构造函数.那么此时动态生成的代理类也需要相同签名的构造函数,并且内部调用原始类的构造函数.自己折腾了1晚上没搞定,现在搞定了发出来供大家一起 ...

  7. Rss 订阅:php动态生成xml格式的rss文件

    Rss 简介: 简易信息聚合(也 叫聚合内容)是一种描述和同步网站内容的格式.使用RSS订阅能更快地获取信息,网站提供RSS输出,有利于让用户获取网站内容的最新更新.网络用户可以在客户端借助于支持RS ...

  8. 在后台代码中动态生成pivot项并设置EventTrigger和Action的绑定

    最近在做今日头条WP的过程中,遇到需要动态生成Pivot项的问题.第一个版本是把几个频道写死在xaml里了,事件绑定也写在xaml里,每个频道绑定一个ObservableCollection<A ...

  9. EasyUI中动态生成标签页

    这是最近学到的内容,当时是有思路但是不知道怎么获取当前的点击对象,就没有实现功能,通过更深入的学习,我知道了不仅仅是Java,Oracle中有一个this,同样的EasyUI中也存在一个this,来获 ...

随机推荐

  1. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 图片

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  2. CSP-J/S2019试题选做

    S D1T2 括号树 设\(f[u]\)表示根到\(u\)的路径上有多少子串是合法括号串.(即题目里的\(k_u\),此变量名缺乏个性,故换之) 从根向每个节点dfs,容易求出\(c[u]\):表示从 ...

  3. 怎样快速高效的定义Django的序列化器

    1.使用Serializer方法自己创建一个序列化器 先写一个简单的例子 class BookInfoSerializer(serializers.Serializer): ""& ...

  4. 第3节 sqoop:6、sqoop的数据增量导入和数据导出

    增量导入 在实际工作当中,数据的导入,很多时候都是只需要导入增量数据即可,并不需要将表中的数据全部导入到hive或者hdfs当中去,肯定会出现重复的数据的状况,所以我们一般都是选用一些字段进行增量的导 ...

  5. Java程序员学习Go指南(三)

    转载:https://www.luozhiyun.com/archives/213 人是否会进步以及进步得有多快,依赖的恰恰就是对自我的否定,这包括否定的深刻与否,以及否定自我的频率如何.这其实就是& ...

  6. Springboot---显示图片/字符串/map集合/list集合

    1.字符串/图片/map集合 @GetMapping("/hello") public String test(Model model){ String message=" ...

  7. 015、Java中定义变量时不设置内容,使用变量前设置内容

    01.代码如下 package TIANPAN; /** * 此处为文档注释 * * @author 田攀 微信382477247 */ public class TestDemo { public ...

  8. MQTT 协议学习:005-发布消息 与 对应报文 (PUBLISH、PUBACK、PUBREC、PUBREL)

    背景 当有订阅者订阅了有关的主题以后,通过发布消息的消息的动作,可以让订阅者收到对应主题的消息. 根据不同的QoS 等级,通信的动作也略有不同. PUBLISH – 发布消息 报文 PUBLISH控制 ...

  9. JQuery 动画实现

    $(this.div_wrong).show().css({width:"0px", height:"0px"})    .animate({width:&qu ...

  10. python 小数相加报错 invalid literal for int() with base 10

    for i in column1: x = int(i) s += xprint "sum:",s,"count:",len(column1)# round ( ...