react ref获取dom对象

react文档

step = React.createRef();  // init

<div ref={this.step}></div> // bind

  componentDidMount() {
    l(this.step.current.offsetHeight); // 获取数据
  }

为 类 添加ref

这种方法是获取组件的实例，而不是组件的dom

class Hello extends Component {
  log = () => {
    l(1);
  };
  render() {
    return (
      <div>
        <button>click me</button>
      </div>
    );
  }
}

class Test extends Component {
  btn = React.createRef();

  componentDidMount() {
    this.btn.current.log(); // 1
  }
  render() {
    return (
      <div>
        <Hello ref={this.btn} />
      </div>
    );
  }
}

函数组件使用 ref

function CustomTextInput(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>
  );  
}

传递 refs

class Hello extends Component {
  render() {
    return (
      <div>
        <button ref={this.props.btnRef}>click me</button>
      </div>
    );
  }
}

class Test extends Component {
  btn = React.createRef();

  componentDidMount() {
    fromEvent(this.btn.current, "click").subscribe(v => l(v.type)); // click
  }
  render() {
    return (
      <div>
        <Hello btnRef={this.btn} />
      </div>
    );
  }
}

高阶组件中传递 ref

function withTest() {
  return function(Target) {
    class WithTest extends Component {
      render() {
        const { forwardedRef, ...rest } = this.props;
        return (
          <div>
            233
            <Target ref={forwardedRef} {...rest} />
          </div>
        );
      }
    }

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

    return React.forwardRef(forwardRef);
  };
}

@withTest()
class Hello extends Component {
  render() {
    return (
      <div>
        <div>hello</div>
      </div>
    );
  }
}

class Test extends Component {
  btn = React.createRef();

  componentDidMount() {
    l(this.btn.current); // 获取到 Hello 的实例
  }

  render() {
    return <Hello ref={this.btn} />;
  }
}