javascript - 虚拟表自动高度的三元运算符

Question

我被困在如何使用 Autosizer 制作虚拟化表以缩小到尽可能小的高度，直到达到某个最大阈值。

有没有办法将我的 autoHeight 转换为使用条件值？

autoheight={height<500}

这是我的渲染函数:

 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的render函数:

 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)}