1.ref = "字符串"获取DOM -- 不推荐使用
import React, { PureComponent } from 'react';
// 第一种获取refs (DOM)
class App extends PureComponent {
render() {
return (
<div>
{/* <h1 ref=字符串/对象/函数>Hello,React</h1> */}
{/* 1. 等于一个字符串 */}
<h1 ref="titleRef">Hello,React</h1>
<button onClick={e => this.changeText()}>字符串改变文本</button>
</div>
);
}
changeText() {
console.log(this.refs.titleRef.innerHTML) // Hello,React
this.refs.titleRef.innerHTML = "Hello,Huzhenchu"
}
}
export default App;
实际截图:
image.png
2. 对象的方式,React推荐的做法
import React, { PureComponent } from 'react';
// 1.第二种获取refs (DOM)
import { createRef } from 'react';
class App extends PureComponent {
constructor(props) {
super(props)
// 2.
this.titleRef = createRef()
}
render() {
return (
<div>
{/* <h1 ref=字符串/对象/函数>Hello,React</h1> */}
{/* 3. 等于一个对象 目前React推荐的 */}
<h1 ref={this.titleRef}>Hello,React</h1>
<button onClick={e => this.changeText()}>对象改变文本</button>
</div>
);
}
changeText() {
console.log(this.titleRef)
console.log(this.titleRef.current)
this.titleRef.current.innerHTML = "hello,huzhenchu"
}
}
export default App;
实际截图:
image.png
3. refs 函数的使用
import React, { PureComponent } from 'react';
// 1.第三种获取refs 函数获取 (DOM)
class App extends PureComponent {
constructor(props) {
super(props)
// 定义一个初始值
this.titleEl = null
}
render() {
return (
<div>
{/* <h1 ref=字符串/对象/函数>Hello,React</h1> */}
{/* 3. 等于一个函数的使用 */}
<h1 ref={arg => this.titleEl = arg}>Hello,React</h1>
<button onClick={e => this.changeText()}>函数改变文本</button>
</div>
);
}
changeText() {
console.log(this.titleEl)
this.titleEl.innerHTML = "Hello,zhuzhenchu"
}
}
export default App;
实际截图:
image.png
4. refs组件中的使用class组件的使用,函数组件是不支持的,因为函数组件是没有实例的
import React, { createRef, PureComponent } from 'react';
class Counter extends PureComponent {
constructor(props) {
super(props)
this.state = {
count: 0
}
}
render() {
const { count } = this.state
return (
<div>
<h2> {count} </h2>
<button onClick={e => this.childAddClick()}>子组件的点击事件</button>
</div>
)
}
childAddClick() {
this.setState({
count: this.state.count + 1
})
}
}
class App extends PureComponent {
constructor(props) {
super(props)
this.titleRef = createRef()
}
render() {
return (
<div>
{/* 1.对象的实现 */}
<Counter ref={this.titleRef} />
<hr />
<button onClick={e => this.fatherAddClick()}>父组件的点击事件</button>
</div>
);
}
fatherAddClick() {
console.log(this.titleRef)
this.titleRef.current.childAddClick()
}
}
export default App;
实际截图:
image.png
5. ref的转发-组件内容的补充
import React, { PureComponent, createRef } from 'react'
class Home extends PureComponent {
render() {
return (
<div>
<h1>Hello World</h1>
</div>
)
}
}
// 函数组件 (函数组件用ref 是获取不到当前实例的)
function Profile(props) {
return <h2>Profile</h2>
}
export default class App extends PureComponent {
constructor(props) {
super(props)
this.titleRef = createRef()
this.homeRef = createRef()
this.profileRef = createRef()
}
render() {
return (
<div>
<h1 ref={this.titleRef}>Hello World</h1>
<Home ref={this.homeRef} />
<Profile ref={this.profileRef}/>
<button onClick={e => this.printRef()}>打印Ref</button>
</div>
)
}
printRef() {
console.log(this.titleRef.current);
console.log(this.homeRef.current);
/**
* index.js:1 Warning: Function components cannot be given refs. Attempts to access this ref will
fail. Did you mean to use React.forwardRef()?
* 警告:函数组件不能给出引用。 尝试访问此ref将失败。 您是想使用React.forwardRef()吗?
* 他是一个函数组件,没有实例的所以拿不到这个东西的
* **/
console.log(this.profileRef.current);
}
}
实际截图
image.png
二.函数式组件是不支持 ref 这种写法的
import React, { PureComponent, createRef } from 'react'
class Home extends PureComponent {
render() {
return (
<div>
<h1>Hello World</h1>
</div>
)
}
}
// 函数组件 (函数组件用ref 是获取不到当前实例的)
function Profile(props) {
return <h2>Profile</h2>
}
export default class App extends PureComponent {
constructor(props) {
super(props)
this.titleRef = createRef()
this.homeRef = createRef()
this.profileRef = createRef()
}
render() {
return (
<div>
<h1 ref={this.titleRef}>Hello World</h1>
<Home ref={this.homeRef} />
<Profile ref={this.profileRef}/>
<button onClick={e => this.printRef()}>打印Ref</button>
</div>
)
}
printRef() {
console.log(this.titleRef.current);
console.log(this.homeRef.current);
console.log(this.profileRef.current);
}
}
实际截图
image.png
三 如果你想获取到ref的话 需要导入 React的一个库 forwardRef函数库
// 1.引入forwardRef函数库
import React, { PureComponent, createRef,forwardRef} from 'react'
class Home extends PureComponent {
render() {
return (
<div>
<h1>Hello World</h1>
</div>
)
}
}
// 函数组件 (函数组件用ref 是获取不到当前实例的)
// 2.forwardRef 函数获取
const Profile = forwardRef(function Profile(props,ref) {
return <h2 ref={ref}>Profile</h2>
})
export default class App extends PureComponent {
constructor(props) {
super(props)
this.titleRef = createRef()
this.homeRef = createRef()
// 3.
this.profileRef = createRef()
}
render() {
return (
<div>
<h1 ref={this.titleRef}>Hello World</h1>
<Home ref={this.homeRef} />
{/* 4. 绑定ref */}
<Profile ref={this.profileRef}/>
<button onClick={e => this.printRef()}>打印Ref</button>
</div>
)
}
printRef() {
console.log(this.titleRef.current);
console.log(this.homeRef.current);
// 5.打印
console.log(this.profileRef.current);
}
}
实际截图
image.png
网友评论