react-virtualized - グリッド上のパブリックメソッドを呼び出す

Question

レンダリングしようとしているGridのパブリックメソッド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> 
    ); 
    } 

そして、あなたが見ることができる文書で定義されたパブリックメソッドのいずれも使用できないI console.log(this.bodyGrid)場合：

ここで何か問題がありますか？

Answer 1

スクリーンショットには、あなたの考えを示すものはありません。それは何が起こっているのか伝えることは本当に可能ではないですが、Gridは間違いなく方法recomputeGridSizeを定義し、あなたの完全なコードを見ることなく

：Grid APIメソッドは、さらに下__proto__ proprety内でなければなりません。たとえば、CellMeasurerコンポーネントは、このメソッドを呼び出すことによって機能します。