要素をページに配置するだけでなく、要素を作成する方法

要素のインスタンスを作成して、コード内の関数を呼び出せるようにする必要がありますか？たとえば、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);

出典

2017-08-10 Ivan

"theGridは型グリッドのです" - どういう意味ですか？また、あなたはアプリ内や他の場所からそれを使って作業しようとしていますか？ – jmargolisvt

グリッドには、forceUpdateなどの関数を呼び出すことができます。クリックすると、ボタンのクリックメソッドのコールバック関数からGrid.forceUpdate（）を呼び出したいというボタンが画面に表示されているとはどうですか？ – Ivan

今のところ私はApp内から呼び出すだけです。 – Ivan