脚本宝典收集整理的这篇文章主要介绍了react开发教程(六)React与DOM,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
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与DOM全部内容,希望文章能够帮你解决react开发教程(六)React与DOM所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。