如何创建一个元素，不只是把它放在页面上

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