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的渲染功能，在上面使用：

 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

更多信息，您在寻找这个吗？

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

来自开发者......

style={this.state.autoHeight}

所以你需要添加一个看起来像这样的样式。

<%= $userIP %>

关于这个话题的一个封闭问题 https://github.com/bvaughn/react-virtualized/issues/488

用于VirtualizedTable的autoHeight上的三元运算符

2 个答案: