componentDidMount（）内のReactJS要素を取得する方法は？

Question

私は特定のリアクションクラスのインスタンスを4つ持っています。 componentDidMount()の後、私は各インスタンスのy位置を保存します。

どのようにレンダリングされた要素に対処できますか？私は異なるクラスの同じクラスの4つの要素を持っているので、classnameを使うことはできません。

マイReactJSコンポーネント：

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

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

Answer 1

使用refs。

まず、各JSX cols要素にref属性を接続します。次に、この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です。