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

问题描述 投票:1回答:2

我坚持如何使用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>
    );
  }
}
javascript reactjs react-virtualized
2个回答
1
投票

没有演示就很难调试,但也许是这样的?

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

-

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

0
投票

更多信息,你在寻找吗?

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主题的一个封闭问题

© www.soinside.com 2019 - 2024. All rights reserved.