Uzyskaj odwołanie do elementu bez użycia refs w reakcji

Question

Powiedziano mi, że refs są prawdopodobnie przestarzałe.

Jak więc mógłbym osiągnąć następujące, biorąc pod uwagę ten kod:

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

     const dimensions = .getDimensionsFromElement(el); 
    } 

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

muszę odniesienie do div kolejce wymiary od niego.

Wiem, że istnieje odwołanie zwrotne, czy powinienem używać tego?

Answer 1

Tylko string refs są uważane za amortyzację, można nadal korzystać callback refs:

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

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

lub w przypadku nie trzeba ref, po prostu węzła DOM z komponentu this korzystając ReactDOM.findDOMNode (demo):

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