获取元素引用而不使用refs in react

Question

我被告知裁判可能会被弃用.

考虑到这段代码,我怎么能实现以下目标:

export default class DemoAxis extends Component {
    componentDidMount() {
      const el = this.refs.line;

      const dimensions = .getDimensionsFromElement(el);
    }

    render() {
      return (
        <div ref="line">
        </div>
      );
    }

我需要对行div的引用来从中获取维度.

我知道有一个参考回调,我应该使用它吗？

Answer 1

只有字符串引用被认为是弃用,你仍然可以使用回调引用:

export default class DemoAxis extends Component {
    componentDidMount() {   
      const dimensions = .getDimensionsFromElement(this._line);
    }

    render() {
      return (
        <div ref={ (ref) => this._input = ref }>
        </div>
      );
    }
}

或者在你的情况下,你不需要ref,只需从组件中获取DOM节点this,使用ReactDOM.findDOMNode(demo):

componentDidMount() {
    const dimensions = ReactDOM.findDOMNode(this).getBoundingClientRect();
    console.log(dimensions);
},