有效的屬性值做出反應

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> 
    ); 
}; 
... 

我得到這個錯誤：

Type '"{this.state.items}"' is not assignable to type 'any[]'.

什麼是List.Grid items的有效屬性值？

Answer 1

指定items=報價中的物業價值像"{this.state.items}"毀了我的時間。

在React JS中它應該是<ListGridExample items={this.state.items} />。

初學者的錯誤之一...... Visual Studio 2017並不建議我刪除這些引號。