ReactDOMのないReactコンポーネントのオーバーフローを検出する方法は？

Question

基本的には、反応コンポーネントにあふれている子があるかどうかを検出できるようにしたいと考えています。ちょうどthis questionのように。私はReactDOMを使用して同じことが可能であることを発見しましたが、i cannot/should not use ReactDOMです。私は提案された代替品であるrefを見ません。これは同等です。

したがって、これらの条件で反応コンポーネント内でオーバーフローを検出できるかどうかを知る必要があります。そして、同じ点まで、幅を全く検出することは可能ですか？

Answer 1

@ jeredの優れた答えに加えて、refがDOM上に直接を置くと、refが正規のDOM要素のさまざまなプロパティに直接アクセスできる要素を返すという修飾子について言及したいと思います要素。つまり、のコンポーネントではこのように動作しません。

だから、あなたは私のようであり、次のことを持っている場合：

var MyComponent = React.createClass({ 
    render: function(){ 
    return <SomeComponent id="my-component" ref={(el) => {this.element = el}}/> 
    } 
}) 

、あなたは（おそらくcomponentDidMountまたはcomponentDidUpdate中）this.elementのDOMプロパティにアクセスしようとすると、あなたが言ったのプロパティが表示されない、以下の5月

：今、あなたは、次のような何かを行うことができます

var MyComponent = React.createClass({ 
    render: function(){ 
    return <div ref={(el) => {this.element = el}}> 
      <SomeComponent id="my-component"/> 
      </div> 
    } 
}) 

のために働く代替可能

Answer 2

はい、refを使用できます。

公式ドキュメントでどのようにref作品についてもっと読むhttps://facebook.github.io/react/docs/refs-and-the-dom.html

を基本的には、refは、コンポーネントがcomponentDidMountが呼び出される直前に、最初にレンダリングするときに実行されるだけのコールバックです。コールバックのパラメータは、ref関数を呼び出すDOM要素です。あなたはこのようなものを持っているのであれば：

var MyComponent = React.createClass({ 
    render: function(){ 
    return <div id="my-component" ref={(el) => {this.domElement = el}}>Hello World</div> 
    } 
}) 

MyComponentマウントが、それはDOM要素#my-componentにthis.domElementを設定ref関数を呼び出しますとき。それと

、それは彼らがレンダリングと子供が親をオーバーフローかどうかを判断した後、あなたのDOM要素を測定するためにgetBoundingClientRect()のようなものを使用するのはとても簡単です：

https://jsbin.com/lexonoyamu/edit?js,console,output

は、測定する方法はありません覚えておいてくださいDOMエレメントのサイズ/オーバーフローがの前にのようにレンダリングされます。定義すると、まだ存在しません。画面にレンダリングするまで、幅と高さを測定することはできません。