React.forwardRef 理解

丑的磕碜 發表於 2021-6-24 13:49:00

<div> </div>
<div><code class="gatsby-code-text">React.forwardRef</code> 会创建一个React组件，这个组件能够将其接受的 ref 属性转发到其组件树下的另一个组件中。这种技术并不常见，但在以下两种场景中特别有用：</div>
<div> </div>
<div>官方解释：</div>
<div>https://react.docschina.org/docs/forwarding-refs.html#forwarding-refs-to-dom-components</div>
<div> </div>
<div>个人代码实例理解：</div>
<div> </div>
<div> </div>
<div> 一 、refs转发到DOM</div>
<div>
<div class="cnblogs_code">
<pre>　　const { Component, createRef, forwardRef, Fragment } = React
　　 　　// DOM 组件
const FouseInput = forwardRef((props, ref) => {
 return (
 <input type="text" ref={ref} />
 )
})

class App extends Component {
 componentDidMount () {
 const { current } = this.inputRef
 console.log(current);
 current.focus()
 }
 render () {
 this.inputRef = createRef()
 return (
 <FouseInput ref={this.inputRef}/>
 )
 }
} </pre>
<div> 　　 ReactDOM.render(<App />, document.getElementById('app'));</div>
</div>
 
</div>
<div>
<div>二、refs转发 高阶组件</div>
<div>
<div class="cnblogs_code">
<pre></pre>
<div>　const { Component, createRef, forwardRef, Fragment } = React</div>
<pre>class App extends Component {
 render () {
 const Compoent = LogProps(FouseRefs)
 return (
 <Compoent/>
 )
 }
}

class FouseRefs extends Component {
 render () {
 const { inputRef, ...rest } = this.props
 return (
 <Fragment>
 <div>input自动聚焦</div>
 <input type="text" ref={inputRef} {...rest} />
 </Fragment>
 )
 }
}

// 定义一个高阶组件
function LogProps (WrapComponent) {
 // 接收传入的组件并加以处理，如绑定ref
 class WrapCom extends Component {
 componentDidMount () {
 const { current } = this.ref
 console.log(current);
 current.focus()
 }
 render () {
 this.ref = createRef()
 return (
 <WrapComponent inputRef={this.ref} {...this.props} />
 )
 }
 }
 // 通过forwardRef 包装返回出去，即被包装组件即可使用 ref
 return forwardRef((props, ref) => {
 return <WrapCom />
 })
}

ReactDOM.render(<App />, document.getElementById('app'));</pre>
</div>
 
</div>
<div> 完整代码</div>
<div>
<div class="cnblogs_code">
<pre><!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>

<body>
<div id="app"></div>
</body>
</html>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<script src="https://cdn.bootcss.com/prop-types/15.6.1/prop-types.js"></script>
<script type="text/babel"> // 使用jsx语法
 const { Component, createRef, forwardRef, Fragment } = React

// 一、refs转发到DOM
// const FouseInput = forwardRef((props, ref) => {
// return (
// <input type="text" ref={ref} />
// )
// })

// class App extends Component {
// componentDidMount () {
// const { current } = this.inputRef
// console.log(current);
// current.focus()
// }
// render () {
// this.inputRef = createRef()
// return (
// <FouseInput ref={this.inputRef}/>
// )
// }
// }

// 二、refs转发高阶组件
 class App extends Component {
 render () {
 const Compoent = LogProps(FouseRefs)
 return (
 <Compoent/>
 )
 }
}

class FouseRefs extends Component {
 render () {
 const { inputRef, ...rest } = this.props
 return (
 <Fragment>
 <div>input自动聚焦</div>
 <input type="text" ref={inputRef} {...rest} />
 </Fragment>
 )
 }
}

// 定义一个高阶组件
function LogProps (WrapComponent) {
 // 接收传入的组件并加以处理，如绑定ref
 class WrapCom extends Component {
 componentDidMount () {
 const { current } = this.ref
 console.log(current);
 current.focus()
 }
 render () {
 this.ref = createRef()
 return (
 <WrapComponent inputRef={this.ref} {...this.props} />
 )
 }
 }
 // 通过forwardRef 包装返回出去，即被包装组件即可使用 ref
 return forwardRef((props, ref) => {
 return <WrapCom />
 })
}

ReactDOM.render(<App />, document.getElementById('app'));
</script></pre>
</div>
 
</div>
</div> 
来源：https://www.cnblogs.com/-roc/p/14926562.html

頁: [1]

琼殿技术论坛's Archiver

React.forwardRef 理解