Office UI Fabric DetailsList 组件出现 TS2322 错误

Question

我正在尝试遵循 office-ui-fabric-react 存储库中的示例 here，只是为了测试新的focusedIndex 函数以将选择滚动到视图中。

但是，WebStorm 正在尝试将 componentRef 属性设置为类变量的 render() 函数中突出显示 TS2322 错误：

（短错误） TS2322：类型 '{componentRef: RefObject... 不可分配给类型 'IntrinsicAttributes & IntrinsicClassAttributes...

使用链接中的完整未修改代码时会发生错误，但这里有一个相关类代码的sn-p供参考和render()函数中的** 受影响的行 ** ：

    import * as React from 'react';
    import { BaseComponent } from 'office-ui-fabric-react/lib/Utilities';
    import { DefaultButton } from 'office-ui-fabric-react/lib/Button';
    import { Fabric } from 'office-ui-fabric-react/lib/Fabric';
    import { IDetailsList, DetailsList, IColumn } from 'office-ui-fabric-react/lib/DetailsList';
    import { Checkbox } from 'office-ui-fabric-react/lib/Checkbox';
    import './DetailsList.Grouped.Example.scss';


    export class DetailsListGroupedExample extends BaseComponent<
      {},
      {
        items: {}[];
        showItemIndexInView: boolean;
      }
    > 
    {
      private _root = React.createRef<IDetailsList>();

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

        this.state = {
          items: _items,
          showItemIndexInView: false
        };
      }

      public render() {
        const { items } = this.state;

        return (
          <Fabric className="DetailsList-grouped-example">
            <div>
              <Checkbox
                label="Show index of the first item in view when unmounting"
                checked={this.state.showItemIndexInView}
                onChange={this._onShowItemIndexInViewChanged}
              />
            </div>
            <DefaultButton onClick={this._addItem} text="Add an item" />
            <DetailsList
              componentRef={this._root}  //**TS2322 ERROR HERE**
              items={items}
              groups={[
                {
                  key: 'groupred0',
                  name: 'By "red"',
                  startIndex: 0,
                  count: 2
                },
                {
                  key: 'groupgreen2',
                  name: 'By "green"',
                  startIndex: 2,
                  count: 0
                },
                {
                  key: 'groupblue2',
                  name: 'By "blue"',
                  startIndex: 2,
                  count: items.length - 2
                }
              ]}
              columns={_columns}
              ariaLabelForSelectAllCheckbox="Toggle selection for all items"
              ariaLabelForSelectionColumn="Toggle selection"
              groupProps={{
                showEmptyGroups: true
              }}
              onRenderItemColumn={this._onRenderColumn}
            />
          </Fabric>
        );
      }
    }

我做错了什么或者我需要做什么来解决这个编译错误？

Answer 1

所以，在这个例子中我已经摆脱了

private _root  = React.createRef<IDetailsList> 

以及对该对象的所有引用。然后示例就像一个魅力。

fabric react 控件似乎发生了一些变化，但他们网站上的代码示例没有更新，这很烦人。

我的代码：

import * as React from 'react';
import styles from './RsfDictionaries.module.scss';
import { IRsfDictionariesProps } from './IRsfDictionariesProps';
import { escape } from '@microsoft/sp-lodash-subset';

import { TextField } from 'office-ui-fabric-react/lib/TextField';
import { Toggle } from 'office-ui-fabric-react/lib/Toggle';
import { DetailsList, DetailsListLayoutMode, Selection, SelectionMode, IColumn, IDetailsList } from 'office-ui-fabric-react/lib/DetailsList';
import { MarqueeSelection } from 'office-ui-fabric-react/lib/MarqueeSelection';
import { IDocument, IDetailsListDocumentsExampleState } from './states'; 

import { BaseComponent } from 'office-ui-fabric-react/lib/Utilities';
import { DefaultButton } from 'office-ui-fabric-react/lib/Button';
import { Fabric } from 'office-ui-fabric-react/lib/Fabric';
import { Checkbox } from 'office-ui-fabric-react/lib/Checkbox';


const _columns = [
  {
    key: 'name',
    name: 'Name',
    fieldName: 'name',
    minWidth: 100,
    maxWidth: 200,
    isResizable: true
  },
  {
    key: 'color',
    name: 'Color',
    fieldName: 'color',
    minWidth: 100,
    maxWidth: 200
  }
];
const _items = [
  {
    key: 'a',
    name: 'a',
    color: 'red'
  },
  {
    key: 'b',
    name: 'b',
    color: 'red'
  },
  {
    key: 'c',
    name: 'c',
    color: 'blue'
  },
  {
    key: 'd',
    name: 'd',
    color: 'blue'
  },
  {
    key: 'e',
    name: 'e',
    color: 'blue'
  }
];
export default class RsfDictionaries extends React.Component<IRsfDictionariesProps, {
  items: {}[];
  showItemIndexInView: boolean;
  }> {


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

      this.state = {
        items: _items,
        showItemIndexInView: false
      };
  }

  public componentWillUnmount() {
    if (this.state.showItemIndexInView) {
      const itemIndexInView = 0;//this._root!.current!.getStartItemIndexInView();
      alert('unmounting, getting first item index that was in view: ' + itemIndexInView);
    }
  }

  private _root :IDetailsList; //React.createRef<IDetailsList>(); 


  public render(): React.ReactElement<IRsfDictionariesProps> {
    const { items } = this.state;

    return (
      <Fabric className="DetailsList-grouped-example">
        <div>
          <Checkbox
            label="Show index of the first item in view when unmounting"
            checked={this.state.showItemIndexInView}
            onChange={this._onShowItemIndexInViewChanged}
          />
        </div>
        <DefaultButton onClick={this._addItem} text="Add an item" />
        <DetailsList
          //={this._root}
          items={items}
          groups={[
            {
              key: 'groupred0',
              name: 'By "red"',
              startIndex: 0,
              count: 2
            },
            {
              key: 'groupgreen2',
              name: 'By "green"',
              startIndex: 2,
              count: 0
            },
            {
              key: 'groupblue2',
              name: 'By "blue"',
              startIndex: 2,
              count: items.length - 2
            }
          ]}
          columns={_columns}
          ariaLabelForSelectAllCheckbox="Toggle selection for all items"
          ariaLabelForSelectionColumn="Toggle selection"
          groupProps={{
            showEmptyGroups: true
          }}
          onRenderItemColumn={this._onRenderColumn}
        />
      </Fabric>
    );
  }

  private _addItem = (): void => {
    const items = this.state.items;

    this.setState(
      {
        items: items.concat([
          {
            key: 'item-' + items.length,
            name: 'New item ' + items.length,
            color: 'blue'
          }
        ])
      },
      () => {
        //if (this._root.current) {
          //this._root.current.focusIndex(items.length, true);
        //}
      }
    );
  };

  private _onRenderColumn(item: any, index: number, column: IColumn) {
    let value = item && column && column.fieldName ? item[column.fieldName] : '';

    if (value === null || value === undefined) {
      value = '';
    }

    return (
      <div className={'grouped-example-column'} data-is-focusable={true}>
        {value}
      </div>
    );
  }

  private _onShowItemIndexInViewChanged = (event: React.FormEvent<HTMLInputElement>, checked: boolean): void => {
    this.setState({
      showItemIndexInView: checked
    });
  };


}