Fluent UI detailslist basic example 如何将项目传递给 DetailsListBasicExample？

Question

我正在尝试使用 here 中的 Fluent UI 详细信息列表组件我刚刚复制了源代码并有一个基于（较旧的）class 的组件，称为 DetailsListBasicExample。该组件扩展了 React 组件、大括号和 IDetailsListBasicExampleState:

    export class DetailsListBasicExample extends React.Component<{},  
  IDetailsListBasicExampleState> {
  private _selection: Selection;
  private _allItems: IDetailsListBasicExampleItem[];
  private _columns: IColumn[];

  constructor(props:{}) {  
    super(props);

    this._selection = new Selection({
      onSelectionChanged: () => this.setState({ selectionDetails: this._getSelectionDetails()  
  }),
    });

    // Populate with items for demos.
    this._allItems = [];
    for (let i = 0; i < 200; i++) {
      this._allItems.push({
        sortOrder: i,
        propertyName: 'Item ' + i,
        dbID: i,
      });
    }

    this._columns = [
      { key: 'column1', name: 'Name', fieldName: 'name', minWidth: 100, maxWidth: 200, 
    isResizable: true },
      { key: 'column2', name: 'Value', fieldName: 'value', minWidth: 100, maxWidth: 200, 
    isResizable: true },
    ];

    this.state = {
      items: this._allItems,
      selectionDetails: this._getSelectionDetails(),
    };
  }

  public render(): JSX.Element {
    const { items, selectionDetails } = this.state;

    return (
      <Fabric>
        <div className={exampleChildClass}>{selectionDetails}</div>
        <Text>
          Note: While focusing a row, pressing enter or double clicking will execute   
          onItemInvoked, which in this
          example will show an alert.
        </Text>
        <Announced message={selectionDetails} />
        <TextField
          className={exampleChildClass}
          label="Filter by name:"
          onChange={this._onFilter}
          styles={textFieldStyles}
        />
        <Announced message={`Number of items after filter applied: ${items.length}.`} />
        <MarqueeSelection selection={this._selection}>
          <DetailsList
            items={items}
            columns={this._columns}
            setKey="set"
            layoutMode={DetailsListLayoutMode.justified}
            selection={this._selection}
            selectionPreservedOnEmptyClick={true}
            ariaLabelForSelectionColumn="Toggle selection"
            ariaLabelForSelectAllCheckbox="Toggle selection for all items"
            checkButtonAriaLabel="Row checkbox"
            onItemInvoked={this._onItemInvoked}
          />
        </MarqueeSelection>
      </Fabric>
    );
  }

我不明白的是这一行：

export class DetailsListBasicExample extends React.Component<{}, IDetailsListBasicExampleState>

如何将对象数组传递给 DetailsListBasicExample？因为我真的很想填充 Itemslist 但我似乎无法弄清楚该怎么做？我试着这样调用组件：

<DetailsListBasicExample props={propertyList}/>

其中属性List 是一个对象数组。我还尝试了以下

DetailsListBasicExample IDetailsListBasicExampleState={propertyList}/>

但我遇到了著名的 Typescript 错误：

Type '{ props: any; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly<{}> & Readonly<...>'. Property 'props' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly<{}> & Readonly<...>'.

我的理解是属性类型不对。但是我怎样才能传递我的物品清单才能让它发挥作用？

有人有想法吗？我也不明白 constructur props:{} 在做什么？

Answer 1

而不是

export class DetailsListBasicExample extends React.Component<{}, IDetailsListBasicExampleState>

你可以写

export class DetailsListBasicExample extends React.Component<IDetailsListBasicExampleProps, IDetailsListBasicExampleState>

然后你必须像状态一样指定你的IDetailsListBasicExampleProps。

例如

  export interface IDetailsListBasicExampleProps {
  myItems: IMyObject[];
}

现在您可以像这样传递您的物品：

<DetailsListBasicExample myItems={  yourItemsHere  }/>

编辑：不要忘记也更改构造函数

Answer 2

React Typescript (tsx) 示例。

import { DetailsList, ISelection, Selection } from '@fluentui/react/lib/DetailsList';

// ...

export const Component = () => {

    const getSelectionDetails = (): string => {
      const selectionCount = selection.getSelection().length;
      return selectionCount
        ? `${selectionCount} items selected: ${selection.getSelection().map( (i: any) => i.key ).join('; ')}`
        : 'No items selected';
    }
    
    const createSelection = () => {
      return new Selection({
        onSelectionChanged: () => setSelectionDetails(getSelectionDetails()),
        getKey: (item: any) => item.key
      });
    };
      
    const [selection, setSelection] = React.useState(createSelection());
    const [selectionDetails, setSelectionDetails] = React.useState('');
    
    return <>
        <DetailsList
            // ...
            selection={selection}
            selectionMode={SelectionMode.multiple}
            // ...
        />
    </>;
}

Fluent UI detailslist basic example 如何将项目传递给 DetailsListBasicExample？

Fluent UI detailslist basic example how to pass items to the DetailsListBasicExample?

typescript

office-js

fluentui-react