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

仅考虑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（demo）从组件this获取DOM节点：

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

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

1 个答案: