React.forwardRef 理解

丑的磕碜 · 发表于 2021-6-24 13:49:00

React.forwardRef 会创建一个React组件，这个组件能够将其接受的 ref 属性转发到其组件树下的另一个组件中。这种技术并不常见，但在以下两种场景中特别有用：

官方解释：

https://react.docschina.org/docs/forwarding-refs.html#forwarding-refs-to-dom-components

个人代码实例理解：

一、refs转发到DOM

　　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}/>
        )
      }
    }

　　 ReactDOM.render(<App />, document.getElementById('app'));

二、refs转发高阶组件

　const { Component, createRef, forwardRef, Fragment } = React

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'));

完整代码

<!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>

来源：https://www.cnblogs.com/-roc/p/14926562.html

React.forwardRef 理解

浏览过的版块