antd modal怎么获取dom元素

componentDidMount() {

consolelog('22',ReactDOMfindDOMNode(thisrefsmode))

consolelog('22',ReactDOMfindDOMNode(thisrefsmode1))

}

<Modal title="Basic Modal" visible={true} ref="modal"

onOk={thisdel} onCancel={thisdel}

><div ref="modal1">

<p >some contents</p>

<p>some contents</p>

<p>some contents</p>

</div>

</Modal>

只能选到 modal1 选不到modal

不懂你获取dom元素 是那部分，如果是内部的可以，如查是 modal 框架的就不可以

1、创建元素节点

创建元素节点并且把节点作为

元素的子节点添加到DOM节点树上。先创建元素点，创建元素节点使用Jquery的工厂函数$()来完成，格式如下：$(html),该方法会根据传入的html字符串返回一个DOM对象，并将DOM对象包装成一个JQuery对象后返回。创建一个元素节点JQuery代码如下：

$li1=$("")

代码返回$li1就是一个由DOM对象包装成的JQuery对象。把新建节点添加到DOM树中JQuery代码如下：

$("ul")append($li1);

添加后页面中只能看到元素默认的"·",由于没有为节点添加文本所以只显示默认符号，下面创建文本节点。

PS:append()方法是添加DOM节点方法详见增--添加DOM节点。

2、创建文本节点

使用JQuery的工厂函数$()同样能够创建文本节点，创建文本节点的JQuery代码如下：

$li2=$("苹果");

代码返回$li2就是一个由DOM对象包装成JQuery对象，把新建的文本节点添加到DOM树中JQuery代码如下：

$("ul")append($li2);

添加后页面中能看到"·苹果"，右键查看页面源码发现新加的文本节点没有title属性。下面方法创建带属性的节点。

3、创建属性节点

创建属性节点同元素节点、文本节点一样使用JQuery的工厂函数完成。创建属性节点的JQuery代码如下：

$li3=$("榴莲");

代码返回$li3也是一个由DOM对象包装成JQuery对象，把新建的属性节点添加到DOM树中JQuery代码如下：

$("ul")append($li3);

添加后页面中能看到"·榴莲"，右键查看页面源码发现新加的属性节点有title='榴莲'属性。

import React from 'react'

import { render } from 'react-dom'

const About = ReactcreateClass({//})

const Inbox = ReactcreateClass({//})

const Home = ReactcreateClass({//})

const App = ReactcreateClass({

getInitialState() {

return {

route: windowlocationhashsubstr(1)

}

},

componentDidMount() {

windowaddEventListener('hashchange', () => {

thissetState({

route: windowlocationhashsubstr(1)

})

})

},

render() {

let Child

switch (thisstateroute) {

case '/about': Child = About; break;

case '/inbox': Child = Inbox; break;

default: Child = Home;

}

return (

<div>

<h1>App</h1>

<ul>

<li><a href="#/about">About</a></li>

<li><a href="#/inbox">Inbox</a></li>

</ul>

<Child/>

</div>

)

}

})

render(<App />, documentbody)

thisprops 对象的属性与组件的属性一一对应，但是有一个例外，就是 thispropschildren 属性。它表示组件的所有子节点

var NotesList = ReactcreateClass({render: function() {return (<ol>{ReactChildrenmap(thispropschildren, function (child) {return <li>{child}</li>;})}</ol>);}});ReactDOMrender(<NotesList><span>hello</span><span>world</span></NotesList>,documentbody);

上面代码的 NoteList 组件有两个 span 子节点，它们都可以通过 thispropschildren 读取，运行结果如下。

hello

world

这里需要注意， thispropschildren 的值有三种可能：如果当前组件没有子节点，它就是 undefined ;如果有一个子节点，数据类型是 object ；如果有多个子节点，数据类型就是 array 。所以，处理 thispropschildren 的时候要小心。 

React 提供一个工具方法 ReactChildren 来处理 thispropschildren 。我们可以用 ReactChildrenmap 来遍历子节点，而不用担心 thispropschildren 的数据类型是 undefined 还是 object。

在使用Typescript开发react应用时，如果不识别dom，那可能是由于没有安装对应的类型声明文件npm install @types/react-dom。下载完成后，重新编译即可识别dom元素。

react中生命周期函数主要分为三个阶段

1创建阶段

2运行阶段

3销毁阶段

先给你的props创建一个默认值  thisstate = {}

 thisstate = {}

thisstate是用来初始化组件的私有数据的，它定义在组件的consturctor构造器函数中，

thisstate会第一时间被初始化，因为class类中，只要new这个类，必然会调用consturctor构造器

      组件将要被创建（还没被创建，我们的数据将在这个阶段拿到。一般在这个阶段发送ajax请求）

    这个函数是组件的虚拟DOM元素，将要挂载到页面上的时候执行

    当执行到这个生命周期函数的时候，即将要开始渲染内存中的虚拟DOM了，当这个函数执行完，内存中就有了一个渲染好的虚拟DOM,但是页面上尚未真正的显示DOM元素呢。

render()

    创建虚拟DOM

componentDidMount()

    将虚拟DOM渲染到页面上

    在这个函数中，我们可以放心的 *** 作页面上需要 *** 作的DOM元素

    所以说我们如果想 *** 作DOM元素，最早只能在      componentDidMount() 中 *** 作。

    componentDidMount()是创建阶段的最后一个函数。

thissetState()     更改了state值，页面就会自动更新

通过状态或属性的改变，都会触发组件的更新

componentWillReceiveProps     

只有当外界传递给自组建的属性被修改了，才会触发这个钩子函数

shouleComponentUpdate

组件是否要被更新

在shouleComponentUpdate中，要求必须返回一个布尔值。

如果返回值为false，则不会执行后面的生命周期函数，而是直接退回了‘运行中’的状态。后面的render()没被调用，因此页面不会被更新，但是组件中的state状态，却被修改了。

componentWillUpdate

组件将要被更新，此时组件还没有被更新，此时得到的元素是页面上旧的dom元素。

thisref

render     

重新渲染内存中的虚拟DOM对象,此时获取到页面上的dom元素还是之前旧的dom元素

当render调用完毕，我们的虚拟DOM树已经和组件的state保持一直了，

componentDidUpdate   

页面更新完毕，新的dom已经画到(渲染到)页面上。

此时state中的数据，虚拟DOM，页面上的DOM都是最新的，此时就可以放心大胆的 *** 作了。

componentWillUnmount

在这个钩子函数中，组件尚可被使用，还没开始卸载

componentWillReceiveProps()

当父组件传递给子组件的props值发生变化的时候，就会触发这个钩子函数。

DOM结构：

<View style={stylescheckContainer}  ref='checkContainer' onLayout={({nativeEvent:e})=>thislayout(e)}> 

</View>

对应js方法：

layout=(e)=>{

      consolewarn(elayouty)  ;

      var UIManager = require('UIManager');

      consolewarn(etarget);

      UIManagermeasure(etarget, (x, y, width, height, left, top) => {

     consolewarn('x:'+x)

     consolewarn('y:'+y)

     consolewarn('width:'+width)

     consolewarn('height:'+height)

     consolewarn('left:'+left)

     consolewarn('top:'+top)

})

}

注意：View组件的onLayout（可以得到宽高和相对位置）配合UIManagermeasure（可以得到宽高和绝对位置）一起使用

附加知识点：

得到某一dom元素的节点值：

import {findNodeHandle} from 'react-native';

var nodeData = findNodeHandle(thisrefsname);

nodeData即为节点值

React提供的这个ref属性，表示为对组件真正实例的引用，其实就是ReactDOMrender()返回的组件实例；

ref 可以挂载到组件上也可以是dom元素上；

Q：ref属性可以设置为一个回调函数

React 支持给任意组件添加特殊属性。ref 属性接受一个回调函数，它在组件被加载或卸载时会立即执行。

Q：当给组件、H5标签添加 ref 属性后，此实例只能在当前组件中被访问到，父组件的 refs 中是没有此引用的，例如：

Q：获取ref引用组件对应的dom节点

不管ref设置值是回调函数还是字符串，都可以通过ReactDOMfindDOMNode(ref)来获取组件挂载后真正的dom节点。

但是对于html元素使用ref的情况，ref本身引用的就是该元素的实际dom节点，无需使用ReactDOMfindDOMNode(ref)来获取，该方法常用于React组件上的ref。

Q： thisrefs 和 ReactDOMfindDOMNode 的区别

Q：新版本的React已经不推荐我们使用ref string转而使用ref callback

以上就是关于antd modal怎么获取dom元素全部的内容，包括:antd modal怎么获取dom元素、react哪一阶段可以访问真实的dom、react router 怎么获取参数等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！