zoukankan html css js c++ java

React.forwardRef 理解

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>

查看全文

相关阅读:
Ubuntu 出现apt-get: Package has no installation candidate问题
 关于Linux下如何获取计算机的硬件信息
 分享自fissure 《Linux编程报错找不到 term.h和curses.h》
亚稳态-竺清儿-ChinaUnix博客
 分享自yebai445791253 《Verilog $random用法》
CodeForces 1288D. Minimax Problem （二分+位运算）
CodeForces 705D. Ant Man 贪心+链表
 CodeForces 832D. Misha, Grisha and Underground LCA
CodeForces 832C. Strange Radiation 二分
 CodeForces 1102F. Elongated Matrix 状压Dp

原文地址：https://www.cnblogs.com/-roc/p/14926562.html