如何创建元素而不仅仅是将其放置在页面上答案

【问题标题】：How to create an element not just place it on the page如何创建元素而不仅仅是将其放置在页面上
【发布时间】：2017-08-10 17:36:17
【问题描述】：

我需要创建元素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);

【问题讨论】：

“theGrid 是 Grid 类型”——这是什么意思？另外，您是在应用内还是从其他地方尝试使用它？
Grid 有可以调用的函数，例如 forceUpdate。你如何建议说屏幕上有一个按钮，当点击时，我想从按钮的点击方法的回调函数中调用 Grid.forceUpdate()？
现在我只想在 App 中调用它。
我怀疑我必须调用 React.CreateElement(Grid) 或类似的东西，然后像我做 Grid 一样将它放在代码上。
可能不是这样。这取决于您的应用程序的结构以及您是否使用 Redux。发布 Grid 的调用站点。

标签： javascript reactjs react-virtualized

【解决方案1】：

你尝试过使用 refs 吗？

将此道具添加到您的Grid：

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

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

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

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

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

【讨论】：

问题是当我使用时，它没有显示网格。当我通过它确实如此。所以我要么可以访问它，因为我有一个变量，但它没有显示，要么我可以显示它，但我无法访问它。
也许我误解了你的答案。也许更完整的代码部分会有所帮助。