在组件的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. PE文件结构体-IMAGE_SECTION_HEADER

    在PE文件头与原始数据之间存在一个区块表(Section Table),它是一个IMAGE_SECTION_HEADER结构数组, 区块表包含每个块在映像中的信息(如位置.长度.属性),分别指向不同的 ...

  2. volume 方式使用 Secret【转】

    Pod 可以通过 Volume 或者环境变量的方式使用 Secret,今天先学习 Volume 方式. Pod 的配置文件如下所示: ① 定义 volume foo,来源为 secret mysecr ...

  3. php截取指定两个字符之间的字符串

    //截取指定两个字符之间的字符串 public function cut($begin,$end,$str){ $b = mb_strpos($str,$begin) + mb_strlen($beg ...

  4. NPOI读取excel 空行

    if (sheet.GetRow(i) != null) 每行判断一下,避免出错.真是蛋疼.

  5. H5端js实现图片放大查看-插件photoswipe的使用

    这个是一个不知道什么鬼的东西,按照他需求改的,我也不知道对不对...看介绍说是h5把,我这个是用那个插件photoswipe的实现的 demo包地址: https://files-cdn.cnblog ...

  6. 【LOJ6498】「雅礼集训 2018 Day2」农民

    题面 solution 直接暴力模拟,原数据可获得满分的成绩. 对于每个点,其父亲对其都有一个限制.故我们只需要判断当前点到根的路径上的限制是否都能满足即可. 考虑用树剖+线段树维护这个限制.考虑到翻 ...

  7. IDEA maven 项目报警告解决(自己的maven配置记录)

    IDEA maven 项目报警告解决 应该是JDK版本太低 虽然你装的高但是默认使用maven 默认的 这里要配一下JDK版本 理解不深入只为 自己记录使用 1 配置 仓库为阿里云   配置本地储存j ...

  8. poj 2456 Aggressive cows 贪心+二分

    Aggressive cows Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 25944   Accepted: 11982 ...

  9. P1083 是否存在相等的差

    P1083 是否存在相等的差 转跳点:

  10. 【LeetCode 】验证回文串

    [问题]给定一个字符串,验证它是否是回文串,只考虑字母和数字字符,可以忽略字母的大小写.说明:本题中,我们将空字符串定义为有效的回文串. 示例 : 输入: "A man, a plan, a ...