1

我正在尝试从这里使用 Fluent UI Detailslist 组件， 我只是复制了源代码并拥有一个（较旧的）基于类的组件，称为 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>
    );
  }

我不明白的是这一行：

导出类 DetailsListBasicExample 扩展 React.Component<{}, IDetailsListBasicExampleState>

如何将对象数组传递给 DetailsListBasicExample？因为我真的很想填充 Itemslist 但我似乎不知道该怎么做？我试图这样调用组件：

<DetailsListBasicExample props={propertyList}/>

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

DetailsListBasicExample IDetailsListBasicExampleState={propertyList}/>

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

输入'{道具：任何；}' 不可分配给类型 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly<{}> & Readonly<...>'。类型“IntrinsicAttributes & IntrinsicClassAttributes & Readonly<{}> & Readonly<...>”上不存在属性“props”。

我的理解是属性类型是错误的。但是我怎样才能通过我的项目列表让它起作用呢？

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

4

2 回答 2

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  }/>

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

于 2020-12-01T08:24:38.963 回答
0

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}
            // ...
        />
    </>;
}
于 2021-12-30T13:38:01.910 回答