React ref的用法

React的ref有3种用法：

1. 字符串(已废弃)
2. 回调函数
3. React.createRef() （React16.3提供）

1. 字符串

最早的ref用法。

1.dom节点上使用，通过this.refs[refName]来引用真实的dom节点

<input ref="inputRef" /> //this.refs['inputRef']来访问

2.类组件上使用，通过this.refs[refName]来引用组件的实例

<CustomInput ref="comRef" /> //this.refs['comRef']来访问

2. 回调函数

回调函数就是在dom节点或组件上挂载函数，函数的入参是dom节点或组件实例，达到的效果与字符串形式是一样的，
都是获取其引用。

回调函数的触发时机：

1. 组件渲染后，即componentDidMount后
2. 组件卸载后，即componentWillMount后，此时，入参为null
3. ref改变后

1.dom节点上使用回调函数

<input ref={(input) => {this.textInput = input;}} type="text" />

2.类组件上使用

<CustomInput ref={(input) => {this.textInput = input;}} />

3.可用通过props跨级传递的方式来获取子孙级dom节点或组件实例

下面是在跨两级获取到孙级别的组件内部的dom节点

function CustomTextInput(props) {

    return (

        <div>

            <input ref={props.inputRef} />

        </div>

    );

}

function Parent(props) {

  return (

    <div>

      My input: <CustomTextInput inputRef={props.inputRef} />

    </div>

  );

}

class Grandparent extends React.Component {

  render() {

    return (

      <Parent

        inputRef={el => this.inputElement = el}

      \/>

    );

  }

}

3.React.createRef()

在React 16.3版本后，使用此方法来创建ref。将其赋值给一个变量，通过ref挂载在dom节点或组件上，该ref的current属性
将能拿到dom节点或组件的实例
例如：

class Child extends React.Component{

    constructor(props){

        super(props);

        this.myRef=React.createRef();

    }

    componentDidMount(){

        console.log(this.myRef.current);

    }

    render(){

        return <input ref={this.myRef}/>

    }

}

4.React.forwardRef

同样是React 16.3版本后提供的，可以用来创建子组件，以传递ref。
例如：

//子组件（通过forwardRef方法创建）

const Child=React.forwardRef((props,ref)=>(

  <input ref={ref} />

));

//父组件

class Father extends React.Component{

  constructor(props){

    super(props);

    this.myRef=React.createRef();

  }

  componentDidMount(){

    console.log(this.myRef.current);

  }

  render(){

    return <Child ref={this.myRef}/>

  }

}

子组件通过React.forwardRef来创建，可以将ref传递到内部的节点或组件，进而实现跨层级的引用。

forwardRef在高阶组件中可以获取到原始组件的实例。

例如：

//生成高阶组件

const logProps=logProps(Child);

//调用高阶组件

class Father extends React.Component{

  constructor(props){

    super(props);

    this.myRef=React.createRef();

  }

  componentDidMount(){

    console.log(this.myRef.current);

  }

  render(){

    return <LogProps ref={this.myRef}/>

  }

}

//HOC

function logProps(Component) {

  class LogProps extends React.Component {

    componentDidUpdate(prevProps) {

      console.log('old props:', prevProps);

      console.log('new props:', this.props);

    }

    render() {

      const {forwardedRef, ...rest} = this.props;

      // Assign the custom prop "forwardedRef" as a ref

      return <Component ref={forwardedRef} {...rest} />;

    }

  }

  // Note the second param "ref" provided by React.forwardRef.

  // We can pass it along to LogProps as a regular prop, e.g. "forwardedRef"

  // And it can then be attached to the Component.

  return React.forwardRef((props, ref) => {

    return <LogProps {...props} forwardedRef={ref} />;

  });

}

//生成高阶组件

const logProps=logProps(Child);

//调用高阶组件

class Father extends React.Component{

  constructor(props){

    super(props);

    this.myRef=React.createRef();

  }

  componentDidMount(){

    console.log(this.myRef.current);

  }

  render(){

    return <LogProps ref={this.myRef}/>

  }

}

//HOC

function logProps(Component) {

  class LogProps extends React.Component {

    componentDidUpdate(prevProps) {

      console.log('old props:', prevProps);

      console.log('new props:', this.props);

    }

    render() {

      const {forwardedRef, ...rest} = this.props;

      // Assign the custom prop "forwardedRef" as a ref

      return <Component ref={forwardedRef} {...rest} />;

    }

  }

  // Note the second param "ref" provided by React.forwardRef.

  // We can pass it along to LogProps as a regular prop, e.g. "forwardedRef"

  // And it can then be attached to the Component.

  return React.forwardRef((props, ref) => {

    return <LogProps {...props} forwardedRef={ref} />;

  });

}

注意：
1. ref在函数式组件上不可使用，函数式组件无实例，但是其内部的dom节点和类组件可以使用
2. 可以通过ReactDOM.findDOMNode()，入参是一个组件或dom节点，返回值的组件对应的dom根节点或dom节点本身
通过refs获取到组件实例后，可以通过此方法来获取其对应的dom节点
3. React的render函数返回的是vDom(虚拟dom)

参考：https://blog.csdn.net/liangklfang/article/details/72858295
https://blog.csdn.net/liwusen/article/details/80009968

巴特西

React ref的用法

最新文章

热门文章