码迷,mamicode.com
首页 > 其他好文 > 详细

react开发教程(六)React与DOM

时间:2020-05-11 18:56:46      阅读:59      评论:0      收藏:0      [点我收藏+]

标签:license   xtend   parent   extends   组件   put   art   end   find   

ReactDOM

findeDOMNode

语法:DOMElement findDOMNode(ReactComponent component)
描述:获取改组件实例相对应的DOM节点 案例:

import React, { Component } from ‘react‘;
import ReactDOM from ‘react-dom‘;

class App extends Component {
    componentDidMount() {
        const dom = ReactDOM.findDOMNode(this)
    }
    
    render() {}
}

render

语法:

ReactComponent render(
    ReactElement element,
    DOMElement container,
    [function callback]
)

描述:改方法吧元素挂载到container中,并且返回element的实例(即refs的引用)。当组件装载完毕时,callback就会被调用。

import React, { Component } from ‘react‘;
import ReactDOM from ‘react-dom‘;

class App extends Component {
    componentDidMount() {
        const dom = ReactDOM.findDOMNode(this)
    }
    
    render() {}
}

unstable_renderSubtreeIntoContainer

语法:

ReactComponent unstable_renderSubtreeIntoContainer(
      parentComponent component,
    ReactElement element,
    DOMElement container,
    [function callback]
)

描述:更新组件到传入的DOM节点上,可以使用它完成在组件内部实现跨组件的DOM操作

import React, { Component } from ‘react‘;
import ReactDOM from ‘react-dom‘;

class App extends Component {
    componentDidMount() {
        const dom = ReactDOM.findDOMNode(this)
    }
    
    render() {}
}

refs

它是react组件中非常特殊的prop,可以附加到任何一个组件上,组件调用是会新建一个该组件的实例,而refs就会指向这个实例。
它可以是一个回调函数,这个回调函数会在组件被挂载后立即执行。

<input type="text" ref={(ref)=>this.textInput = ref} />

也可以是一个字符串

<Comp ref="myComp"/>

吧refs放到原生的DOM组件中,我们可以通过refs获取到DOM节点;而如果吧refs放到React组件上获取到的就是组件的实例

上一篇:react开发教程(五)生命周期

下一篇:react开发教程(七)React事件系统

react开发教程(六)React与DOM

标签:license   xtend   parent   extends   组件   put   art   end   find   

原文地址:https://www.cnblogs.com/10manongit/p/12870448.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!