wordpress做流量站,建设银行官网登录入口,揭阳城乡建设局网站,深圳网站制作开发一、概念
1、出现的原因
在react典型的数据流中#xff0c;props传递是父子组件交互的唯一方式#xff1b;通过传递一个新的props值来使子组件重新re-render,从而达到父子组件通信。当然#xff0c;就像react官网所描述的一样#xff0c;在react典型的数据流之外#xf…一、概念
1、出现的原因
在react典型的数据流中props传递是父子组件交互的唯一方式通过传递一个新的props值来使子组件重新re-render,从而达到父子组件通信。当然就像react官网所描述的一样在react典型的数据流之外某些情况下例如和第三方的dom库整合或者某个dom元素focus等为了修改子组件我们可能需要另一种方式这就是ref方式。
2、介绍
React提供的这个ref属性表示为对组件真正实例的引用其实就是ReactDOM.render()返回的组件实例需要区分一下ReactDOM.render()渲染组件时返回的是组件实例而渲染dom元素时返回是具体的dom节点
二、ref获取dom
import React from react;
export default class LearnRef extends React.Component {constructor(props) {super(props);/*** 使用React.createRef 创建一个ref对象* 来接收dom元素的*/this.myInput React.createRef();}getInputDom() {console.log(this.myInput);}render() {return (div哈喽 ref{/* 给dom元素添加ref属性这个属性值使我们之前创建的ref对象注意ref 是react里面的保留字做组件传值的时候不推荐设置ref的属性*/}input ref{this.myInput} /button onClick{() this.getInputDom()}获取input的dom/button/div);}
}三、使用ref实现父组件访问子组件中的数据和方法
import React from react;export default class LearnRef2 extends React.Component {state {name: 张三,age: 11,};addAge () {this.setState({age: this.state.age 1})}render() {return (divdiv{this.state.name} -- {this.state.age}/div/div);}
}四、给ref设置一个回调函数获取dom元素或者组件实例
1、能够更准确的控制何时refs 被设置和解除
React 会在组件挂载时调用 ref 回调函数并传入 DOM元素(或React实例)当卸载时调用它并传入 null。在 componentDidMount 或 componentDidUpdate 触发前React 会保证 Refs 一定是最新的。
2、例子
import React from react;
import LearnRef2 from ./learn-ref2;export default class LearnRef3 extends React.Component {state {learnRef2: null}/*** 初始化的时候会传入ref组件的实例* 组件卸载的时候会传入null* param {} component */initComponentRef (component) {this.learnRef2 component};addAge () {if (this.learnRef2) {this.learnRef2.current.addAge()}}render() {return (divdiv哈喽 ref/divLearnRef2 ref{this.getComponent}/LearnRef2button onClick{() this.addAge()}修改子组件里的年龄/button/div);}
}
