react-virtualized - 在 Grid 上调用 public 方法

Question

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

见下文，其中 ref 在最终 Grid 中定义：

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) 文档中定义的 public 方法中的 none 可用：

我是不是做错了什么？

Answer 1

我认为屏幕截图没有显示您认为的那样。 Grid API 方法应该在 __proto__ 属性内：

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