0

使用此 Office UI Fabric 的列表网格代码时：

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？

4

1 回答 1

0

在报价中分配items=财产价值就像"{this.state.items}"毁了我的时间。

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

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

于 2017-07-22T09:18:14.567 回答