React方向：react中5种Dom的 *** 作方式

通过 documentquerySelector('#title') 原生js的方式去拿到dom节点，然后去进行 *** 作。

但是需要值得一提的是，官方的refs将在未来的时间段内会被废除，并且因ref挂载的节点是挂载在组件实例上，因此函数不能使用es5的写法，如果使用es5的写法，需要bind去更改this指向，否则thisrefs拿到的将是undefined。

使用这种方式需要注意的是ReactDOM需要使用 import ReactDOM from 'react-dom' 提前引入进来，否则是找不到findDOMNode这个方法的。

前面涉及到 refs 即将被删除，因此，新版本 React 不推荐 使用ref string去 *** 作DOM，转而推荐我们使用 ref callback的使用方式，通过这种方式挂载到实例对象上面，只需要在回调函数中使用this属性名即可

Refs 是使用 ReactcreateRef() 创建的，并通过 ref 属性附加到 React 元素。在构造组件时，通常将 Refs 分配给实例属性，以便可以在整个组件中引用它们。当 ref 被传递给 render 中的元素时，对该节点的引用可以在 ref 的 current 属性中被访问。

ref 的值根据节点的类型而有所不同：

通过实现监听输入框的值以及将输入框的值追加到获取到的dom元素ul中去，在通过获取ul的子节点li，去给所有的li添加点击事件

一、如图展示表格如何展示下方嵌套的deptName

在这里插入描述

官网在这里插入描述

二、解决方案

<Column align="center" title="部门" dataIndex={["dept", "deptName"]} />

1

1

技术交流分享/面试总结

微信名片

打开CSDN APP，看更多技术内容

最新发布 保姆级教程：Ant Design Vue中 a-table 嵌套子表格

Ant Design Vue中 a-table 嵌套子表格 及只打开一个嵌套表格的方法

继续访问

Antd(Ant-design)，嵌套子表格（expandedRowRender）的异步获取数据

使用阿里的ant-design开源框架，要在表格里面嵌套子表格，需要在用户点击父表格的一行数据后，获取该行的key，然后去异步请求后台的数据用来填充子表格的内容。 如果这样写（省略无关代码）： expandedRowRender = (record) => { dispatch({ type: 'flow/getPlanList', payload: { contractId: recordcontract_id, // 该参数

继续访问

react-ant design table表格 多级可编辑表格

antd-react 3X版本 多级可编辑table

继续访问

reactjs ant-design中table 树结构三级嵌套时逻辑问题

实现三级嵌套树结构时，勾选三级里的子节点时候父节点也会自动勾选，当子节点大于一项时候取消勾选某一子结构时父节点不变；当子节点只有一项时父节点也会自动取消勾选 import StandardTablePage from '@/components/StandardTablePage'; // 用户选中某一行 userSelect(record, selected, selectedRows, nativeEvent) { let { selectedRowKeys } = thisst

继续访问

React antd的table表格之嵌套表格

React antd的table表格之嵌套表格 最近做了几个pc端的后台管理需求，涉及了table中的嵌套表格，嵌套的子表格大体分为两种效果： 效果1-----点击展开新的子表格，旧的子表格关闭 效果2-----可同时展开多个子表格 效果1：嵌套表格，实现点击展开按钮，展开子表格请求接口数据，点击新的子表格收起原来的子表格效果 // 设置一个State用来储存展开的行，控制属性 const [expandedRowKeys,setExpandedRowKeys] = useState<any&gt

继续访问

vue 嵌套表格组件_支持嵌套对象、多级数组的Vue动态多级表单组件 —— vue-dynamic-form-component

方便不想看完全篇文章的童鞋，简单总结一下，这是篇软广，主要是推广自己在业务中沉淀的一个开源组件 vue-dynamic-form-component 。基于 element-ui 实现的 vue组件，只需编写类似 async-validator 的规则，自动生成对应的表单，支持常见输入类型的同时，支持嵌套对象、hashmap、多维数组等复杂类型。有需要的童鞋欢迎使用和贡献代码，顺便给个star(我

继续访问

antd table嵌套子表格 后端动态获取数据 rudex写法示例

有一个需求是可以使主表格里每一栏数据展开，在子table里显示与其相关的子数据项，展开的时候去向后台请求数据显示。 用的组件库是Antd。 首先我们看Antd官方文档的Table有嵌套子表格的功能， 可见我们需要使用expandedRowRender参数，但是尝试在expandedRowRender函数中进行请求，会发现发出了连续的请求，所以我们把请求写在onExpand中，只在点击展开图表的时候发出一次。 之后我们写onExpand函数，注意这里的参数要写上expanded，代表是展开还是合并，我之前

继续访问

React-Antd-表格-嵌套子表格

文档地址: 链接 import { Table, Badge, Menu, Dropdown, Space } from "antd"; import { DownOutlined } from "@ant-design/icons"; import { useEffect, useState } from "react"; export default function App() { const columns = [//定义外层表格头数据 { title: "姓名", dataInde

继续访问

React antd Table 实现单元格点击 表头斜线分组等功能

react antd 单元格添加点击事件 自定义单元格

继续访问

进阶Ant-Design-Vue你知道table多级表头嵌套展开写法吗？

前言： 在Ant-Design-Vue的前端项目中，我们会经常处理表格，表单这些组件元素，熟练运用并知道它们在使用过程中的联系与区别，这是一个前端必不可少的哟。本文我旨在解决两个问题： （1）如何便于更好的嵌套多级表头 （2）如何通过a-checkbox控制全选，单选显示a-table对应的列元素 类似于ElementUI,Ant-Design-vue中有很多相似点，但又不完全苟同，有很多自己独有的写法和思想。相信很多人都是先入手ElementUI,再入手Ant,这其实是对开发者比较友好的方式，如果

继续访问

前端面试题（react）

性能优化分为2个方面setState 是修改其中的部分状态，相当于 Object assign，只是覆盖，不会减少原来的状态； replaceState 是完全替换原来的状态，相当于赋值，将原来的 state 替换为另一个对象，如果新状态属性减少，那么 state 中就没有这个状态了接收旧的 state 和 action，返回新的 state受控组件就是可以被 react 状态控制的组件 在 react 中，Input textarea 等组件默认是非受控组件（输入框内部的值是用户控制，和React无关）

继续访问

Antd 表格设置表头分组实现可编辑行

主要通过 onCell 方法修改 children 中 cloumn 的属性。

继续访问

antd 能自适应吗_admin-antd-react 是一个后台前端解决方案，它基于 React、Ant Design和 UmiJs实现。

admin-antd-react 是一个后台前端解决方案，它基于 React、Ant Design和 UmiJs实现。2020-11-11 13:47:08 • 阅读 144 次# 介绍[admin-antd-react](>

react项目使用的是antd UI组件库（3x版本），页面打开初始化后，select就报如下错误

1、Warning: Failed prop type: Invalid prop `value` supplied to `Select`

2、 Warning: Failed prop type: Invalid prop `value` supplied to `Option`

解决办法：return出想要的值，不需要多余的嵌套

存在一个数据量大的列表，如select、list，可能存在1000个数据项

传统做法是直接将1000个item渲染到页面上，即渲染1000个dom

从上图可以看出，可视区域范围内，仅有7个item，也就是说，不可见的993个元素的存在是浪费资源，从而导致渲染时占满内存、造成页面卡顿。

从这里我们可以入手优化这个list。

既然可视区域只有至多7个元素可见，那么就仅仅渲染这7个dom，不渲染剩下的993个dom。

我们需要计算出如下的数据：

我们可以用到 offsetHeight 属性，元素的可视高度

在此之前需要先定义一个滚动容器，并使用ref将其管理起来，并且设置容器高度 height ，和 overflow-y ， 让它滚动起来。 这里为了组件的通用性，我们将 height 和 width 都通过父组件传入的方式获取。

这里我们需要先将第一个子元素渲染出来才能动态地获取它的高度， 同样，我们将列表通过props传入

用可视化区域的高度 除以 单个元素的高度，再向上取整，因为存在一些可见，但是不完全可见的元素，所以这里向上取整。

滚动容器中有个属性叫 scrollTop ，表示当前已滚动的高度，也就是上方不可见的区域。

我们用 scrollTop 除以单个元素的高度 domHeight ，再向下取整，即可得到当前可见区域第一个元素的下标。

至此我们可以将上边需要动态计算的几个变量存入state

下面开始渲染。

这里需要截取 listDom ， 使用 slice() 方法。截取起始位置为 currentIndex ，结束为止为 currentIndex + domCount

在这里我们会发现，列表上只有7个元素，且无法滚动

我们还没有给元素绑定滚动事件。

这里我们将上述计算逻辑提到一个函数中进行，并将其绑定scroll

绑定事件后发现还是无法滚动

原来我们还需要给列表设置上下空白区域，撑开列表，不然无法模拟出来真是列表的高度。

我们继续计算上下空白的高度。

上空白的高度，我们已经计算出了当前可视区域第一个元素的下标了，也计算出了单个元素的站位高度那么

下空白的高度

整个列表的高度 - 可视区域的元素高度 - 上空白的高度

将这两个变量也存入state

然后再将上下两个空白元素添加到dom结构中占位，此时需要将计算 domHeight 的取值下标改为[1]

这里可以看到dom结构中只有几个可见的dom, 并且滑动时动态变化。

渲染效率也大大提高。

可以明显感觉到变快了

在这里我们渲染的时候事在对 listDom 在不断地增删、也就是在不断的增加、删除dom。

那么可不可以不增加删除、或者尽量少地增加删除dom实现我们的功能呢？

element_diff (相同层级的虚拟dom发生变化)

如滚动前 A B C D

滚动后 B C D E

如果不加key，则无法判断 B C D是否还是原来的B C D

对比时 发现A!=B，则会删除A，添加B，以此类推 删除B C D、插入 C D E

添加key后，发现B C D没有变化 ，仅仅需要删除A 插入E即可

1 请求数据失败后页面就一直报错，需强刷才能继续进行下去

解决方案： try catch

2 在中chrome中记住密码然后密码框会自动记住密码，解决方案

    已开始设置密码框的type="text" ，在得焦的时候，把其type改成password即可

3 文本域自动撑开

4 识别html 

    dangerouslySetInnerHTML

5 select call put 用法

    select 可以获取到 state 中文件的值  let param = yield select(state={return statecommonparam}) // common model的命名 

    call  const res = yield call('请求借口','参数')

    put   yield put({type:'reducers保存文件名称',payload:'参数'}) // 保存数据

            yield put({type:'当前文件下函数名称',payload:'参数'}) // 请求当前modal的函数

6 react 可拖拽d窗

import React from 'react';

import {Button, Icon} from 'antd';

import PropTypes from 'prop-types';

import styles from '/dragless';

import TrialModal from "/trialModal";

class DragModal extends ReactComponent {

  constructor(props) {

    super(props);

    const {visible} = thisprops;

    const {clientWidth, clientHeight} = documentdocumentElement;

    thisstate = {

      visible: (visible !== '' && visible !== null) visible : false,

      clientWidth,

      clientHeight,

      pageX: (clientWidth-1000) / 2,

      pageY: '10vh',

      moving: false,

    }

  }

  componentWillReceiveProps({visible}) {

    if (visible !== '' && visible !== null) {

      thissetState({visible});

    }

  }

  componentDidMount() {

    thisresize();

    windowaddEventListener('resize', thisresize);

  }

  resize = () => {

    const {clientWidth, clientHeight} = documentdocumentElement;

    // consolelog(`监听到窗口大小变化 宽：${clientWidth} 高：${clientHeight}`)

    const modal = documentgetElementById("modal");

    if (modal) {

      const pageY = (clientHeight - modaloffsetHeight) / 45;

      const pageX = (clientWidth - modaloffsetWidth) / 2;

      thissetState({ clientWidth,clientHeight, pageX, pageY})

    }

  }

  onCancel = () => {

    const {onCancel} = thisprops;

    if (onCancel) {

      onCancel();

    } else {

      thissetState({visible: false})

    }

  }

  open = () => {

    thissetState({visible: true});

  }

  // 获取鼠标点击title时的坐标、title的坐标以及两者的位移

  getPosition = (e) => {

    // 标题DOM元素titleDom

    const titleDom = etarget;

    // titleDom的坐标

    const X = titleDomgetBoundingClientRect()left;

    const Y = titleDomgetBoundingClientRect()top;

    // 鼠标点击的坐标

    let mouseX = 0, mouseY = 0;

    if (epageX || epageY) {  //ff,chrome等浏览器

      mouseX = epageX;

      mouseY = epageY;

    } else {

      mouseX = eclientX + documentbodyscrollLeft - documentbodyclientLeft;

      mouseY = eclientY + documentbodyscrollTop - documentbodyclientTop;

    }

    // 鼠标点击位置与modal的位移

    const diffX = mouseX - X;

    const diffY = mouseY - Y;

    return {X, Y, mouseX, mouseY, diffX, diffY}

  }

  /

  鼠标按下，设置modal状态为可移动，并注册鼠标移动事件

  计算鼠标按下时，指针所在位置与modal位置以及两者的差值

  /

  onMouseDown = (e) => {

    const position = thisgetPosition(e);

    windowonmousemove = thisonMouseMove;

    thissetState({moving: true, diffX: positiondiffX, diffY: positiondiffY});

  }

  // 松开鼠标，设置modal状态为不可移动,

  onMouseUp = (e) => {

    thissetState({moving: false});

  }

  // 鼠标移动重新设置modal的位置

  onMouseMove = (e) => {

    const {moving, diffX, diffY} = thisstate;

    if (moving) {

      // 获取鼠标位置数据

      const position = thisgetPosition(e);

      // 计算modal应该随鼠标移动到的坐标

      const x = positionmouseX - diffX;

      const y = positionmouseY - diffY;

      // 窗口大小

      const {clientWidth, clientHeight} = documentdocumentElement;

      const modal = documentgetElementById("modal");

      if (modal) {

        // 计算modal坐标的最大值

        const maxHeight = clientHeight - modaloffsetHeight;

        const maxWidth = clientWidth - modaloffsetWidth;

        // 判断得出modal的最终位置，不得超出浏览器可见窗口

        const left = x > 0 (x < maxWidth x : maxWidth) : 0;

        const top = y > 0 (y < maxHeight y : maxHeight) : 0;

        thissetState({pageX: left, pageY: top})

      }

    }

  }

  render() {

    const { width,visible, title,dataTrialResult,form,dataTrial,trialData} = thisprops;

    const { clientWidth, clientHeight, pageX, pageY} = thisstate;

    const modal = (

      <div className={stylescustom_modal_mask} style={{width: clientWidth, height: clientHeight}}>

        <div

          id="modal"

          className={stylescustom_modal_win}

          style={{

            width:1000,

            height: 500,

            marginLeft: pageX,

            marginTop: pageY,

          }}>

          <div

            className={stylescustom_modal_header}

            onMouseDown={thisonMouseDown}

            onMouseUp={thisonMouseUp}

          >

            {title title : null}

            <div className={stylescustom_modal_header_close} onClick={thispropshandleCancelTrial}>

              <Icon type="close"/>

            </div>

          </div>

          <div className={stylescustom_modal_content}>

            <TrialModal form={form}

                        trialData={trialData}

                        dataTrialResult={dataTrialResult}

                        dataTrial={dataTrial}

                        handleChangeTrial={thispropshandleChangeTrial}

                        handleChangeSelectTrual={thispropshandleChangeSelectTrual}

                        handleChangeDateTiral={thispropshandleChangeDateTiral}

                        handleClickTrialBtn={thispropshandleClickTrialBtn}></TrialModal>

          </div>

          {/<div className={stylescustom_modal_footer}>

            <div className={stylescustom_modal_footer_inner}>

              <Button onClick={thisonCancel}>

                {cancelText cancelText : '取消'}

              </Button>

              <Button type="primary" onClick={onOk} style={{marginLeft: '10px'}}>

                {okText okText : '确定'}

              </Button>

            </div>

          </div>/}

        </div>

      </div>

    )

    return <div>{!visible null : modal}</div>

  }

}

DragModalpropTypes = {

  visible: PropTypesbool,

  title: PropTypesstring,

  width: PropTypesany,

  height: PropTypesany,

  closable: PropTypesbool,

  okText: PropTypesstring,

  cancelText: PropTypesstring,

  onCancel: PropTypesfunc,

  onOk: PropTypesfunc,

  onOkLoading: PropTypesbool,

}

export default DragModal;

7 setFieldsValue使用

            myFormsetFieldsValue({

                  ['vc_centerno']: paramDataconvertMap[i]VC_CENTERNO,

                });

8  setFields 使用

        myFormsetFields({

                VC_WORKTIME: {

                  value: '',

                }

              });

以上就是关于React方向：react中5种Dom的 *** 作方式全部的内容，包括:React方向：react中5种Dom的 *** 作方式、antdesign表格标题下面还有子标题、react+antd Failed prop type: Invalid prop `value` supplied to `Select`.等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！