Как получить элемент ReactJS внутри componentDidMount()?

Question

У меня есть 4 экземпляра определенного класса React. После componentDidMount() Я хочу сохранить y-позицию каждого экземпляра.

Как я могу обратиться к визуализированному элементу? Я не могу использовать classname, потому что у меня есть 4 элемента одного класса с разными позициями.

Мой ReactJS компонент:

const Col = React.createClass({ 
    componentDidMount: function() { 
     //here address the actual rendered col-instance 
    }, 

    render() { 
     return (
      <div className='col'> 
      </div> 
     ); 
    } 
}); 

Answer 1

Использование refs.

Сначала подключите атрибут ref к каждому из элементов JSX cols. Затем используйте этот ref, внутри метода componentDidMount, для доступа к узлу DOM компонента (фактическому элементу HTMLElement). Наконец, получите позицию/смещение элемента или что-нибудь еще, что вам нужно.

const Col = React.createClass({ 
    componentDidMount: function() { 
     // this.refs.col1 is the actual DOM element, 
     // so you can access it's position/offset or whatever 
     const offsetTop = this.refs.col1.offsetTop; 
    }, 

    render() { 
     return (
      <div className="col" ref="col1"> 
      </div> 
     ); 
    } 
}); 

PS: Я не уверен, что вы имеете в виду, говоря, элемент y позиции. В любом случае, как только вы узнаете, как получить элемент DOM (this.refs.col1), вы можете использовать javascript to retrieve the position, который вам нужен.