反応中の参照を使わずに要素参照を取得する

Question

参考資料は推奨されなくなる可能性が高いと言われています。私はそれから寸法を取得するために、ラインのdivへの参照が必要

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

     const dimensions = .getDimensionsFromElement(el); 
    } 

    render() { 
     return (
     <div ref="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); 
},