react里 render双层循环写法

2023-10-27

render循环如下数据的写法

dataArr=[[{},{},{}],[],[],[],]

 <List className="tbBox">
         <Flex className="title">
              {data.map(item => (
                  <Flex.Item 
                      key={item.title} 
                      style={item.width?{width:'25%',flex:'none'}:null}//动态style样式
                  >
                  {item.title}
                  </Flex.Item>
              ))}
          </Flex>
          //双层循环写法
          {dataArr.map((arr,indArr)=>(//双层循环---外层
          <Flex  key={`wc${indArr}`} onClick={(e)=>{this.onRowClick(indArr,e)}}>
              {dataArr[0].map((item,index) => (//双层循环--内层
                  <Flex.Item key={`nc${item.title}${index}`}  style={item.width?{width:'25%',flex:'none'}:null}>
                      {
                          item.component==='InputItem'?
                          <InputItem
                          placeholder="请输入"
                          keyName={`${item.keyName}&${indArr}`}
                          form = {this.props.form}
                          onBlur={this.onBlur}
                          rules={item.rules}
                          type={item.type}
                          onChange = {this.onChange}
                          initialValue={item.value}
                          />
                      :(item.component==='Picker'?
                          <Picker
                              keyName={`${item.keyName}&${indArr}`}
                              placeholder="请选择"
                              data={item.data}
                              rules={item.rules}
                              form = {this.props.form}
                              onChange = {this.onChange}
                              initialValue={item.value}
                              />
                      :(item.component==='InputModal'?
                          <InputModal
                              keyName={`${item.keyName}&${indArr}`}
                              placeholder="请输入"
                              data={item.data}
                              rules={item.rules}
                              onChange = {this.onChange}
                              form = {this.props.form}
                              initialValue={item.value}
                              />
                      :null))
                      }
                  </Flex.Item>

              ))}
          </Flex>
          ))}
      </List>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

react里 render双层循环写法 的相关文章

  • quill编辑器使用

    官方git https github com quilljs quill 官方文档 https quilljs com 中文文档 https kang bing kui gitbook io quill 编辑器是个正经编辑器 就是文档太不正
  • 【React】 4课 react初识组件

    首先我们如1课创建一个文件夹在文件夹中安装react环境需要的配置文件 npm init y npm i babel standalone D npm i react react dom D 安装配置文件教程链接 https blog cs
  • 如何使用 Ant Design 创建问卷类型表单?

    Ant Design 提供了一个动态表单项 通过使用它 我可以添加和删除多个字段 但现在我想嵌套其中 即我想创建一个类似调查表的表单 在其中我想添加多个问题及其各自的答案 目前 当我添加问题时 它工作正常 但当我添加一个问题的答案时 它也会
  • 当 mobx 存储中的状态发生变化时,Ant-Design Table 不会渲染

    我对 ant design Table 组件中单击一行的行为进行了编程 这应该更改表上的 rowClassName 这是 CodeSandBox 上的示例 当您单击表行时 Store selectedRowKey 中的值会发生变化 但表不会
  • 黑马React:基础拓展

    黑马React D10 基础拓展 Date December 18 2023 useReducer 基础使用 作用 让 React 管理多个 相对关联 的状态数据 补充 和useState的作用类似 用来管理相对复杂的状态数据 特点 use
  • React Jsx转换成真实DOM过程?

    面试官 说说React Jsx转换成真实DOM过程 一 是什么 react 通过将组件编写的 JSX 映射到屏幕 以及组件中的状态发生了变化之后 React 会将这些 变化 更新到屏幕上 在前面文章了解中 JSX 通过 babel 最终转化
  • Ant Design Form - onAfterChange 处理程序

    我使用 antd 创建了一个表单 每当字段发生更改时 它都会使用以下命令将表单值输出到控制台onValuesChange函数在一个Form 我的问题是Slider组件称之为onValuesChange拖动滑块时起作用 我希望它位于onmou
  • 在 antd Form + ReactJs 中使用 antd Tooltip

    如果我输入无效的邮件 ID 我需要使用 antd 工具提示显示 无效的电子邮件 如何在ReactJS antd Form中使用它 我现在使用的代码是 div div
  • 尽管提供了接受属性,Antd 上传程序仍然接受所有文件

    我正在使用 antd 拖放组件https ant design components upload components upload demo drag https ant design components upload compone
  • 需要在范围选择器选择区域antd中仅显示一个月

    我在用着antd日历范围选择器对于我的反应应用程序 我想在选择时仅显示一个月的日历下拉列表 而不是默认的两个月 div div
  • 测试 const 模态组件是否被调用

    我有一个页脚组件 上面有几个按钮 所有这些按钮都使用Messageconst 这是一个 antd 模式 消息 jsx import Modal from antd const confirm Modal export const Messa
  • 如何使用Radio.Group Antd设置检查?

    我有无线电绘制的动态数据 有一个活动无线电的 ID 它也是动态生成的 如何比较 id 并安装与 Radio Group 的检查 最后我需要获取表单中的单选值 该代码无法正常工作 动态数据可能会更大 const dynamiclyData i
  • 如何在 AntD Reactjs 中打开表格行按钮上的模态并访问模态中的表格数据

    我在 antd 表中显示用户数据 并在表中为每行创建了编辑按钮来访问每行记录 我想在 编辑 按钮单击时打开模态并在模态中获取相应的行数据 但无法 因为它给出了错误 showModal 未定义 版本 antd 4 18 9 axios 0 2
  • Ant design页面重新加载css渲染延迟

    我使用我的 React TypeScript 项目蚂蚁设计 https ant design docs react use in typescript 重新加载页面时遇到一些问题 css loading delay 这有什么原因吗 我导入了
  • 在 Ant Design React 框架中将表列标题转置(旋转)到行

    我正在尝试使用 Ant Design React UI 框架创建一个表 其中行设置表标题而不是列 换句话说 我正在尝试转置默认表 默认情况下 使用该框架的表格如下所示 First Name Last Name Date of Birth A
  • vscode 中使用 antd 框架的按钮提示

    我在 vscode 中使用 antd 的按钮和输入 但它在按钮上显示错误 我想知道为什么 我试过输入法 没有显示错误 如图所示 import React from react import styles from index css imp
  • Ant Design Collapse - 关闭按钮

    我是 Ant Design 的初学者 在使用 Ant Design 库中的 Collapse 和 Form 时遇到了这个问题 我已经设置了我的页面 其中添加新项目的表单位于折叠中 并且折叠下方有一个项目列表
  • 如何使用 Antd / Less 和 Sass / CSS 模块配置 Next.js

    我想用Next js https nextjs org 带有 Sass 和 CSS 模块但也想使用蚂蚁设计 https ant design 并希望对较小的建筑尺寸使用 Less 样式 我可以启用 CSS 模块或 Less 加载器 但不能同
  • ant-d upload中如何为removeFile添加PopConfirm一个图片文件

    我正在使用 Ant d Upload 通过本地系统上传文件 然后单击文件预览图像上的删除图标 图像文件将被删除 我想添加一个弹出确认 所以我尝试在 onRemovefunction 中添加确认作为承诺但它不起作用 它在浏览器中显示警报 on
  • Antd select 元素:如何禁用输入?

    我正在尝试使用模式 multiple 的选择元素 我希望禁用输入 这意味着用户只能在现有选项之间进行选择 而不能输入文本 我该怎么做呢 我的元素 import Select from antd import antd dist antd c

随机推荐