Javascript react虚拟化-在网格上调用公共方法

我想访问我正在渲染的

网格之一上的public方法。我已经创建了
ref
，但是当我尝试调用该方法时，该方法似乎不可用

参见下文，在最终的
网格中定义了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>
    );
  }

render（）{
const{structure，columnHeaderIndex，variables}=this.props；
常数{
边栏宽度，
头球，
人头计数，
高度，
网格高度，
网格宽度
}=变量；
const rowCount=structure.length；
const columnCount=columnHeaderIndex.length；
if（structure.length==0 | | columnCount.length==0）返回null；
console.log（this.bodyGrid）；
返回(
{({
克莱恩特，
客户端宽度，
昂斯克罗尔，
卷轴高度，
向左滚动，
滚动顶，
卷轴宽度
}) => {
返回(

我在这里做错了什么吗？
我不认为屏幕截图显示了您认为它显示的内容。
网格
API方法应该在
\uuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu
适当的范围内：


在没有看到完整代码的情况下，实际上不可能知道发生了什么，但是
Grid
明确定义了一个方法
recomputegridize
。例如，
CellMeasurer
组件通过调用此方法来工作。
你完全正确@brianvaughn。我本来希望公共方法直接出现在
bo中dyGrid
对象-没有意识到它们将隐藏在
\uuuuu proto\uuuuu
属性中。此外，我在尝试调用这些方法时出错，因为我在
渲染（）中进行了实验
方法，以及在第一次调用它时，
此.bodyGrid
未定义，这导致了错误。我现在能够成功调用这些方法，方法是将调用塞入一个if语句，检查
此.bodyGrid
是否存在。一如既往，感谢您的帮助。您是一个强大的力量！很高兴听到您这样做了t它已解决！是的，在最初安装组件之前，引用为空。：）