react-virtualized -调用网格上的公共方法

Question

我想要访问我正在呈现的一个Grid上的公共方法recomputeGridSize。我已经创建了ref，但当我尝试调用该方法时，似乎该方法不可用。

请参见下面在最终Grid中定义ref的位置

render() {
    const { structure, columnHeaderIndex, variables } = this.props;
    const {
      sidebarWidth,
      headerHeight,
      headerRowCount,
      height,
      gridHeight,
      gridWidth
    } = variables;
    const rowCount = structure.length;
    const columnCount = columnHeaderIndex.length;

    if (structure.length === 0 || columnCount.length === 0) return null;

    console.log(this.bodyGrid);

    return (
      <div>
        <ScrollSync>
          {({
            clientHeight,
            clientWidth,
            onScroll,
            scrollHeight,
            scrollLeft,
            scrollTop,
            scrollWidth
          }) => {
            return (
              <div>
                <div
                  className="LeftSideGridContainer"
                  style={{
                    position: 'absolute',
                    top: 0,
                    left: 0,
                    backgroundColor: 'black',
                    borderBottom: '1px solid black',
                    color: 'white'
                  }}
                >
                  <Grid
                    cellRenderer={this.renderLeftHeaderCell}
                    className="header-grid"
                    width={sidebarWidth + 1}
                    columnWidth={sidebarWidth + 1}
                    height={headerHeight}
                    rowHeight={headerHeight}
                    rowCount={1}
                    columnCount={1}
                  />
                </div>
                <div
                  className="LeftSideGridContainer"
                  style={{
                    position: 'absolute',
                    top: headerHeight,
                    left: 0,
                    borderTop: '1px solid black',
                    backgroundColor: 'white',
                    color: 'black'
                  }}
                >
                  <Grid
                    cellRenderer={this.renderLeftSideCell}
                    columnWidth={sidebarWidth + 1}
                    columnCount={1}
                    className="left-side-grid"
                    height={height}
                    rowHeight={gridHeight}
                    rowCount={rowCount}
                    scrollTop={scrollTop}
                    width={sidebarWidth + 1}
                  />
                </div>
                <div className="grid-column">
                  <AutoSizer disableHeight>
                    {({ width }) =>
                      <div>
                        <div
                          style={{
                            height: headerHeight,
                            width: width - scrollbarsize(),
                            overflow: 'hidden'
                          }}
                        >
                          <Grid
                            className="header-grid"
                            cellRenderer={this.cellRenderer}
                            cellRangeRenderer={this.renderHeaderCells}
                            columnWidth={gridWidth}
                            columnCount={columnCount}
                            height={headerHeight}
                            rowHeight={headerHeight / headerRowCount}
                            rowCount={headerRowCount}
                            scrollLeft={scrollLeft}
                            width={width - scrollbarsize()}
                          />
                        </div>
                        <div
                          style={{
                            height: height,
                            width: width,
                            borderLeft: '1px solid black',
                            borderTop: '1px solid black'
                          }}
                        >
                          <Grid
                            className="calendar-body"
                            cellRenderer={this.cellRenderer}
                            cellRangeRenderer={this.cellRangeRenderer}
                            columnWidth={gridWidth}
                            columnCount={columnCount}
                            height={height}
                            rowHeight={gridHeight}
                            rowCount={rowCount}
                            width={width}
                            onScroll={onScroll}
                            ref={ref => {
                              this.bodyGrid = ref;
                            }}
                          />
                        </div>
                      </div>}
                  </AutoSizer>
                </div>
              </div>
            );
          }}
        </ScrollSync>
      </div>
    );
  }

您可以看到，如果我console.log(this.bodyGrid)文档中定义的任何公共方法都不可用：

​

​

我是不是做错了什么？

Answer 1

我不认为屏幕截图显示了您认为它显示的内容。Grid应用程序接口方法应该在更低的__proto__属性内：

​

​

如果看不到完整的代码，就不可能知道发生了什么，但Grid确实定义了一个方法recomputeGridSize。例如，CellMeasurer组件通过调用此方法来工作。