React中Refs学习(二)

上篇文章我们说到react中refs一些基本的知识,本篇文章我们学习refs进阶知识!这也是年前最后一篇文章了!

对父组件暴露节点

大多数情况下,我们不需要让子组件对父组件暴露DOM,而且React也不太支持我们这么做(尽管这是可行的),但是有些情况你又非得这么做,比如:让子组件input自动获得焦点亦或者你必须知道子组件的位置和大小!

function children(props) {
  return (
    <div>
      <input ref={props.inputRef} />
    </div>
  );
}

class Parent extends React.Component {
  render() {
    return (
      <children
        inputRef={el => this.inputElement = el}
      />
    );
  }
}

需要注意的是,如果你直接在子组件上添加ref然后在父组件上获取,获取到的将会是子组件实例而不是你需要的Dom节点,所以这时候我们需要在子组件上暴露一个特殊的属性,然后让父组件获取。

回调refs

在上一篇中有说到函数式组件无法使用ref,但是你可以在函数式组件内部使用ref,这个时候ref必须指向Dom元素或者class。这是也就是回调了。

函数式组件内部使用ref

function Fakin(props) {
  // 这里必须声明 textInput,这样 ref 回调才可以引用它
  let textInput = null;

  function handleClick() {
    textInput.focus();
  }

  return (
    <div>
      <input
        type="text"
        ref={(input) => { textInput = input; }} />

      <input
        type="button"
        value="Focus the text input"
        onClick={handleClick}
      />
    </div>
  );
}

类组件中ref回调示例


class CustomTextInput extends React.Component { constructor(props) { super(props); this.textInput = null; this.setTextInputRef = element => {//ref回调函数 this.textInput = element; }; this.focusTextInput = () => { if (this.textInput) this.textInput.focus();//自动获得焦点 }; } componentDidMount() { this.focusTextInput(); } render() { return ( <div> <input type="text" ref={this.setTextInputRef} /> </div> ); } }

这段代码的意思是打开页面input自动获得焦点,ref={this.setTextInputRef}this.setTextInputRefthis.textInput指向了DOM元素(input)。

那有人要说了,你这个用ref回调和我直接写ref={xxx}有什么区别啊,都可以做到相同的事情!

React是这么描述refs回调的

which gives more fine-grain control over when refs are set and unset.

意思是ref回调可以对何时设置和取消引用进行更精细的控制。

在上面这段代码中,React会在组件挂载时用DOM元素调用ref回调,组件卸载的时候把ref设置为null,从而能更加精确的控制!

高阶组件的refs

好像博主的文章还没涉及高阶组件,不管了,先简单的介绍了高阶组件吧。

高阶组件:获取一个组件并返回一个新的组件

咦,这不就是纯函数吗。

function fakin(ChildrenComponent) {
  class Fakin extends React.Component {
    render() {
      return <ChildrenComponent {...this.props} />;
    }
  }
  return Fakin;
}

在HOC(高阶组件中使用refs,父组件获取子组件的dom)

function fakin(Component) {

  class Fakin extends React.Component {
    componentDidUpdate(prevProps) {
      console.log('old props:', prevProps);
      console.log('new props:', this.props);
    }

    render() {
      const {forwardedRef, ...rest} = this.props;
      return <Component ref={forwardedRef} {...rest} />;
    }
  }

  return React.forwardRef((props, ref) => {
    return <Fakin {...props} forwardedRef={ref} />;
  });
}

在类组件Fakin中正常返回<Component ref={forwardedRef} {...rest} />;而且ref书写
最后咱们使用React.forwardRef这个方法来显示将refs转发到内部组件。否则refs指向的是Fakin这个HOC

补充

React.createRef()创建ref

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  render() {
    return <div ref={this.myRef} />;
  }
}

访问refs

const myRef = this.myRef.current;

React.forwardRef创建一个React,同时接收一个函数作为参数,该函数有两个参数(prop,ref),该函数返回一个React节点,把两个参数(prop,ref)作为节点的(prop,ref)

const Button = React.forwardRef((props, ref) => (
  <button ref={ref} className="Button">
    {props.children}
  </button>
));

const ref = React.createRef();
<Button ref={ref}>点击我</Button>;

这一点React不希望我们这么做,但是在HOC中有时候不得不这么做~