2017-02-24 7 views
0

"ref"までスクロールしようとしているときに何が問題なのかわかりません。私は怒っているような検索をしており、完全な意味を持つURLを見つけましたが、私のシナリオではうまくいかないでしょう。React .createClass()がスクロールしてref:scrollIntoViewが関数ではない

私が反応し、ルータ3.0.0とともに15.4.2を使用して反応するアプリを持っています。私はオプションのルートパラメータを取るコンポーネントへのルートを持っていて、それを使ってcomponentDidUpdate()の要素にスクロールしようとしています。私は

のscrollIntoViewは私がそのことを確認した機能

ではありません...カップル異なる方法を実装するが、私はエラーを取得)ref.scrollIntoView(の直近の実装を以下に試してみましたcomponentDidUpdate()の時点で "refコールバック"が存在します。

私はちょうど.createClass()を使用するような何かが欠けているのですが、クラス定義を使用するときに得られるメソッドがないか、まったく間違っていますか?

私はパッケージを使用するだけにジャンプすることができますが、このようなことは、私が気にしているようにネイティブであるときに何が起こっているのか理解できないことではありません。

同様のフローを維持しながら、問題を示すためにコードが簡略化されました。コードの構文に不一致があります。

APP

const App = React.createClass({ 
    render() { 
     return (
      <Router history={ appHistory }> 
       <Route path='home' component={ Home }> 
        <IndexRoute component={ Page } /> 
        <Route path='page(/:itemIndex)' component={ Page } /> 
       </Route> 
       <Route path='add-new-item' component={ AddNewItem } /> 
      </Router> 
     ) 
    } 
}); 

HOME アクティブな指標に基づいて子供をレンダリングするナビゲーションバーを持つ単なるラッパーである

がコンポーネントである新しい項目を追加これはgoto/page/[新しく作成されたアイテムのインデックス]

PAGE

const Page = React.createClass({ 
    getInitialState() { 
     return { 
      data: undefined, 
      scrollTo: parseInt(this.props.params.goalIndex) || undefined 
     }; 
    }, 

    componentWillMount() { 
     // this gets data and does a setState for data 
    }, 

    componentDidUpdate() { 
     let { scrollTo } = this.state; 

     if(scrollTo && this['item-' + scrollTo]) { 
      this['item-' + scrollTo].scrollIntoView(); 
     } 
    }, 

    renderTiles() { 
     return this.state.data.map((item, index) => { 
      return (
       <Item 
        key={ 'item-' + index } 
        ref={ node => this['item-' + index] = node } 
       > 
        <p>foo bar...</p> 
       </Item> 
      ) 
     }); 
    }, 

    render() { 
     return (
      <div> 
       { this.state.data && this.renderTiles() } 
      </div> 
     ); 
    } 
}); 

答えて

5

ネストされたが、REFと成分を反応させるので要素法は使用できませんだけでなく、DOM要素法とDOM要素です。

簡単に修正するために、Reactコンポーネントを標準のDOM要素にラップして、それにrefを割り当てることができます。

renderTiles() { 
    return this.state.data.map((item, index) => { 
     return (
      <div 
       key={ 'item-' + index } 
       ref={ node => this['item-' + index] = node } 
      > 
       <Item> 
        <p>foo bar...</p> 
       </Item> 
      </div> 
     ) 
    }); 
}, 
関連する問題