Question

使用this Office UI Fabric's List Grid code时：

import * as React from 'react';
import { FocusZone } from 'office-ui-fabric-react/lib/FocusZone';
import { List } from 'office-ui-fabric-react/lib/List';
// import './List.Grid.Example.scss'; Not existing file!

export interface IListGridExampleProps {
  items: any[];
}

const ROWS_PER_PAGE = 3;
const MAX_ROW_HEIGHT = 250;

export class ListGridExample extends React.Component<IListGridExampleProps, any> {
  private _positions;
  private _columnCount: number;
  private _columnWidth: number;
  private _rowHeight: number;

  constructor() {
    super();

    this._positions = {};
    this._getItemCountForPage = this._getItemCountForPage.bind(this);
    this._getPageHeight = this._getPageHeight.bind(this);
  }

  public render() {
    return (
      <FocusZone>
        <List
          className='ms-ListGridExample'
          items={ this.props.items }
          getItemCountForPage={ this._getItemCountForPage }
          getPageHeight={ this._getPageHeight }
          renderedWindowsAhead={ 4 }
          onRenderCell={ (item, index) => (
            <div
              className='ms-ListGridExample-tile'
              data-is-focusable={ true }
              style={ {
                width: (100 / this._columnCount) + '%'
              } }>
              <div className='ms-ListGridExample-sizer'>
                <div className='msListGridExample-padder'>
                  <img src={ item.thumbnail } className='ms-ListGridExample-image' />
                  <span className='ms-ListGridExample-label'>
                    { `item ${index}` }
                  </span>
                </div>
              </div>
            </div>
          ) }
        />
      </FocusZone>
    );
  }

  private _getItemCountForPage(itemIndex: number, surfaceRect) {
    if (itemIndex === 0) {
      this._columnCount = Math.ceil(surfaceRect.width / MAX_ROW_HEIGHT);
      this._columnWidth = Math.floor(surfaceRect.width / this._columnCount);
      this._rowHeight = this._columnWidth;
    }

    return this._columnCount * ROWS_PER_PAGE;
  }

  private _getPageHeight(itemIndex: number, surfaceRect) {
    return this._rowHeight * ROWS_PER_PAGE;
  }
}

使用该类如：

...
componentDidMount() {
    this.setState({
        items: [
            {
                key: 1,
                name: 'example 1',
                thumbnail: 'https://placehold.it/214x214',
            },
            {
                key: 2,
                name: 'example 2',
                thumbnail: 'https://placehold.it/214x214',
            },
        ],
    });
}

render() {
    return (
        <div className='ms-welcome'>
            ...
            <ListGridExample items="{this.state.items}" />
        </div>
    );
};
...

我收到了这个错误：

类型'“{this.state.items}”'不能分配给'any []'。

List.Grid items的有效属性值是什么？

Answer 1

在items=这样的引用中分配"{this.state.items}"属性值会破坏我的时间。

在React JS中应该是<ListGridExample items={this.state.items} />。

初学者的错误之一...... Visual Studio 2017并没有建议我删除那些引号。

Fabric React的List.Grid组件的“items”的有效属性值

1 个答案: