如何創建一個元素，不只是把它放在頁面上

Question

我需要創建元素Grid的一個實例，以便我可以在代碼中調用它的功能？例如，如果theGrid的類型爲Grid，我希望將它放在頁面上，但我也想將它保存爲局部變量，以便稍後可以說：theGrid.forceUpdate()。下面的代碼不顯示Grid。但是，如果我用<Grid...>代替（當然有參數），它會顯示在頁面上，但我不再可以在我的代碼中引用它。

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import { Grid } from 'react-virtualized'; 
import ReactInterval from 'react-interval'; 

// Grid data as an array of arrays 
const quoteList = [ 
    ['GE', 100, 35.28, 35.30, 100, 95125], 
    ['IBM', 100, 135.11, 135.20, 100, 195125], 
    ['C', 100, 45.23, 45.30, 100, 195125] 
]; 

const App = React.createClass({ 
    getInitialState() { 
    return { 
     enabled: false, 
     timeout: 1000, 
     count: 0 
    }; 
    }, 

    cellRenderer ({ columnIndex, key, rowIndex, style }) { 
    return (
     <div 
     key={key} 
     style={style} 
     > 
     {quoteList[rowIndex][columnIndex]} 
     </div> 
    ) 
    }, 

    render() { 
    const {timeout, enabled, count} = this.state; 
    var theGrid = React.createElement(Grid, { 
      cellRenderer:this.cellRenderer, 
      columnCount:quoteList[0].length, 
      columnWidth:50, 
      height:quoteList.length * 20, 
      rowCount:quoteList.length, 
      isVisible : true, 
      rowHeight:20, 
      width:800}, null); 

    return (
     <div> 
     <ReactInterval {...{timeout, enabled}} 
      callback={ 
      () => { 
       this.setState({count: this.state.count + 1}) 
       quoteList[0][1] = this.state.count 
       console.log(quoteList[0][1]) 
      } 
      } 
     /> 

     <input type="number" step="200" min="200" max="5000" value={this.state.timeout} 
      onChange={({target: {value}}) => this.setState({timeout: parseInt(value, 10)})} />&nbsp; 

     <button disabled={enabled} onClick={() => this.setState({enabled: true})}> 
      Start</button>&nbsp; 

     <button disabled={!enabled} onClick={() => this.setState({enabled: false})}> 
      Stop</button>&nbsp; 

     {count} 

     <div> 
      &nbsp; 
     </div> 

     <theGrid/> 
     </div> 
    ); 
    } 
}); 

const appRoot = document.createElement('div'); 
document.body.appendChild(appRoot); 
ReactDOM.render(<App />, appRoot); 

Answer 1

您是否嘗試過使用參考？

這個道具添加到您的Grid：

ref={(ref) => this.theGrid = ref} 

現在，你應該能夠通過this.theGrid引用的網格。

的反應虛擬解決類似的問題作者：

https://github.com/bvaughn/react-virtualized/issues/383

更多關於裁判：

https://facebook.github.io/react/docs/refs-and-the-dom.html

https://zhenyong.github.io/react/docs/more-about-refs.html