reactjs - 如何在详细信息 lsit 列上显示共享点查找值？

Question

我正在尝试在 SPFx React webparts 项目中的 Office UI Fabric 的 DetailsList 上显示共享点查找值，但我无法做到。谁能帮我实现这个？谢谢你。

项目值格式如下图

[
 {
   Id   : 0,
   Title : "test0",
   Body : {
            Body_p1: "test0_p1",
            Body_p2: "test0_p2"
          },
  },
  {
   Id  : 1,
   Title : "test1",
   Body : {
            Body_p1: "test1_p1",
            Body_p2: "test1_p2"
          }
  }
] 

我想使用这个控件。 https://developer.microsoft.com/en-us/fabric#/controls/web/detailslist

我想像这样显示上面的数据。

|Id | Title | Body
|0  | test0 | test0_p1
|1  | test1 | test1_p1

或者

|Id | Title | Body
|0  | test0 | test0_p2
|1  | test1 | test1_p2

这是用于在线共享点的 SPFx webparts react 项目。

我厌倦了打击代码，但 Body.Body_p1 和 Body.Body_p2 值没有显示。

笔记。项目值在 {items} 中，我按照此说明进行操作。 https://developer.microsoft.com/en-us/fabric#/controls/web/detailslist/basic

export interface IListItem{
  Id: number;
  Title: string;
  Body : {
           Body_p1: string;
           Body_p2: string;
  };
}

export interface IReactExState{
  items: IListItem[];
}

export default class ReactEx extends React.Component<IReactExProps, IReactExState>{

//some code here

private _columns: IColumn[];

if(/*conditions*/){
   this._columns = [
        { key: 'Id', name: 'Id', fieldName: 'Id', minWidth: 100, maxWidth: 200, isResizable: true },
        { key: 'Title', name: 'Title', fieldName: 'Title', minWidth: 200, maxWidth: 400, isResizable: true },
        { key: 'Body', name: 'Body', fieldName: 'Body.Body_p1', minWidth: 200, maxWidth: 400, isResizable: true },
    ];
}
else{
   this._columns = [
        { key: 'Id', name: 'Id', fieldName: 'Id', minWidth: 100, maxWidth: 200, isResizable: true },
        { key: 'Title', name: 'Title', fieldName: 'Title', minWidth: 200, maxWidth: 400, isResizable: true },
        { key: 'Body', name: 'Body', fieldName: 'Body.Body_p2', minWidth: 200, maxWidth: 400, isResizable: true },
    ];
}

public render(): React.ReactElement<IReactExProps>{

 return(
   {/*some code here*/}
   <MarqueeSelection selection={this._selection}>
            <DetailsList
              items={items}
              columns={this._colmns}
              setKey="RequestID"
              layoutMode={DetailsListLayoutMode.justified}
              selection={this._selection}
              selectionPreservedOnEmptyClick={true}
              ariaLabelForSelectionColumn="Toggle selection"
              ariaLabelForSelectAllCheckbox="Toggle selection for all items"
              checkButtonAriaLabel="Row checkbox"
              onItemInvoked={this._onItemInvoked}
            />
    </MarqueeSelection>
    {/*somec ode here*/}
  );
}

标签： reactjssharepointoffice-ui-fabricspfx

Answer 1

You need to use **onRender** property which is available in IColumn 

onRender: (item) => (<div>{item["LookupName"]["Title"]}</div>) 

You can conditionally render like this 



 onRender: (item) => (      
                        {item["LookupName"] !=undefined ?<div>item["LookupName"]["Title"] 
                         </div> : "NA" }
                        )