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

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

1 个答案: