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

Question

我对如何使用 Autosizer 缩小到尽可能小的高度直到某个最大阈值来制作虚拟化Table感到困惑。

有没有办法将我的自动高度转换为使用条件值？

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

多一点信息，你在找这个吗？

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

Answer 2

没有演示很难调试，但也许是这样的？

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

-

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

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

Ternary operator on autoHeight for VirtualizedTable

javascript

reactjs

react-virtualized