陣營.createClass（）滾動到REF：scrollIntoView不是一個函數

我有麻煩搞清楚什麼是當我試圖滾動到「參考」錯誤。我一直在瘋狂搜索，發現完全合理的網址，但在我的場景中不起作用。陣營.createClass（）滾動到REF：scrollIntoView不是一個函數

我有使用應用反應15.4.2與反應路由器3.0.0沿。我有一個路由組件，它接受一個可選的路由參數，並試圖用它來滾動到componentDidUpdate（）上的元素。我試過實現了幾個不同的方式，但在繼最近實施ref.scrollIntoView（的），我得到一個錯誤......

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 僅僅是一個基於活性指數呈現兒童導航欄包裝

添加新項 是一個組件將轉到/頁/ [新創建的項目索引]

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> 
     ); 
    } 
});

來源

2017-02-24 Jeff

嵌套陣營組分與裁判是隻是，不與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> 
     ) 
    }); 
},

來源

2017-02-24 21:19:14 Jeff

陣營.createClass（）滾動到REF：scrollIntoView不是一個函數

回答

相關問題