reactjs - 在react中不使用refs获取元素引用

Question

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

考虑到这段代码，我怎样才能实现以下目标:

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

      const dimensions = .getDimensionsFromElement(el);
    }

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

我需要引用 line div 来从中获取尺寸。

我知道有一个 ref 回调，我应该使用它吗？

Answer 1

仅 string refs考虑弃用，您仍然可以使用 callback refs :

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

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

或者在您的情况下，您不需要引用，只需使用 ReactDOM.findDOMNode 从组件 this 获取 DOM 节点即可(demo):

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