virtualizedTableのautoHeightの3進演算子

Question

自動化ツールを使用して仮想化テーブルを作成して、特定の最大しきい値まで最小可能な高さに縮小する方法について悩んでいます。

autoHeightを条件付き値に変換する方法はありますか？ここで

render(): ?React$Element<any> { 
    const { columns, selectedItems, rulesList } = this.state; 
    const { shouldRender, currentRule, sort } = this.props; 

    if (!shouldRender) return <div />; 

    return (
     <Grid columns={1} id="rulesTabContent"> 
     <Grid.Row style={NO_PADDING_BOTTOM}> 
      <Grid.Column> 
      <VirtualizedTable 
       id="rulesTable" 
       autoHeight={true} 
       height={500} 
       rowDef={rowDef => this.rowDef(rowDef, currentRule.id)} 
       onRowDoubleClick={this.checkExpanded} 
       columns={columns} 
       sortVals={sort} 
       setSort={this.updateSort} 
       sortFn={this.sortFunc} 
       getRowHeight={rowHeight} 
       noRowsRenderer={this.noRowsRenderer} 
       rowCount={rulesList.length} 
       setSelectedItems={this.setSelectedItems} 
       selectedItems={selectedItems} 
       list={rulesList} 
      /> 
      </Grid.Column> 
     </Grid.Row> 
     </Grid> 
    ); 
    } 

が上に使用されているVirtualizedTableの機能、レンダリングされています：、あなたがこのために

import { 
    AutoSizer, 
    Table, 
    Column, 
    SortIndicator, 
    SortDirection 
} from "react-virtualized"; 

. 
. 
. 

render() { 
    const { 
     list, 
     sortVals, 
     onRowClick, 
     onRowsRendered, 
     noRowsRenderer, 
     getRowHeight, 
     columns, 
     onRefresh, 
     ...restOfProps 
    } = this.props; 

    return (
     <AutoSizer disableHeight> 
     {({ width }) => (
      <Table 
      headerClassName="virtualized-header" 
      headerHeight={HEADER_HEIGHT} 
      rowHeight={getRowHeight ? this._rowHeight : DEFAULT_ROW_HEIGHT} 
      overscanRowCount={OVERSCAN} 
      width={width} 
      sort={this._sort} 
      sortBy={sortVals.by} 
      sortDirection={sortVals.direction} 
      rowCount={list.size} 
      noRowsRenderer={this._noRows} 
      rowGetter={this._getRow} 
      rowClassName={this._getRowClassName} 
      rowRenderer={this._renderRow} 
      onRowsRendered={this._onRowsRendered} 
      onRowClick={this._onRowClick} 
      {...restOfProps} 
      > 
      {Array.isArray(columns) 
       ? columns 
       : Object.keys(columns).map(key => columns[key])} 
      </Table> 
     )} 
     </AutoSizer> 
    ); 
    } 
} 

Answer 1

に閉じられた問題は、デモなしでデバッグするのは難しいですが、多分このような何か？

return (
    <AutoSizer> 
    {({ width, height }) => (
     <Table 
     height={height} 
     ... 

-

<VirtualizedTable 
    id="rulesTable" 
    autoHeight={height < 500} 
    height={Math.min(height, 500)} 

Answer 2

もう少し情報を探しています。ここ

autoheight={height<500} 

は私のレンダリング機能です？ Devから

style={{height: 'auto', max-height: '500px', overflow: 'scroll'}) 


this.state = { 
autoHeight: {overflowX: 'hidden'}, 
} 

{rulesList.length < 50 ? this.setState({autoHeight: {overFlowX: 'hidden'}}) : this.setState({autoHeight: overFlowX: 'scroll'}) } 

...

style={{ 
    overflowX: 'hidden', 
    overflowY: 'hidden' 
    }} 

ですから、次のようになりますスタイルを追加する必要があります。相続人

style={this.state.autoHeight} 

トピック https://github.com/bvaughn/react-virtualized/issues/488