如何创建一个元素，而不仅仅是将它放在页面上

Question

我需要创建元素 Grid 的实例，以便我可以在代码中调用它的函数？例如，如果 theGrid 是 Grid 类型，我既想将它放在页面上，又想将它保存为局部变量，以便稍后可以说：theGrid.forceUpdate() .

下面的代码不显示 Grid。但是，如果我用 <Grid...> 替换 theGrid 所在的位置（当然有参数），它会显示在页面上，但我无法再在我的代码中引用它。

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

您尝试过使用 refs 吗？

将此道具添加到您的 Grid:

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

现在您应该可以通过 this.theGrid 引用网格了。

react-virtual 的作者解决了类似的问题：

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

如何创建一个元素，而不仅仅是将它放在页面上

How to create an element not just place it on the page

javascript

reactjs

react-virtualized