在 Sharepoint Online 中将基本控件（例如标签和文本框）添加到人员选择器中并做出反应

Question

我有下面的代码，可以使用 React Framework 在 Sharepoint 在线呈现人物选择器。如何添加标签、文本框和按钮等基本控件。

    import * as React from 'react';
    import * as ReactDom from 'react-dom';
    import { Version } from '@microsoft/sp-core-library';

    import { Label } from 'office-ui-fabric-react/lib/Label';
    import { TextField } from 'office-ui-fabric-react/lib/TextField';
    import { getId } from 'office-ui-fabric-react/lib/Utilities';


    export interface IPnPPeoplePickerWebPartProps {
      description: string;
    }

    export default class PnPPeoplePickerWebPart extends 
      BaseClientSideWebPart<IPnPPeoplePickerWebPartProps> {

      public render(): void {
       const element: React.ReactElement<IPnPPeoplePickerProps > = React.createElement(
        PnPPeoplePicker,
          {
          description: this.properties.description,
          context: this.context
          }
       );

      ReactDom.render(element, this.domElement);

      }

这是标签的代码。我只是不知道在哪里插入它。它在渲染方法中不起作用。

export const LabelBasicExample = () => {
  // Use getId() to ensure that the ID is unique on the page.
  // (It's also okay to use a plain string without getId() and manually ensure uniqueness.)
  const textFieldId = getId('anInput');

      return (
        <div>
          <Label>I'm a Label</Label>
          <Label disabled={true}>I'm a disabled Label</Label>
          <Label required={true}>I'm a required Label</Label>
          <Label htmlFor={textFieldId}>A Label for An Input</Label>
          <TextField id={textFieldId} />
        </div>
      );
    };

Answer 1

我建议您创建一个新的 React 组件来包装您的组件。另外，第一段代码中的 render() 方法有点奇怪...看看第二段，没有调用 ReactDom.render.

通常那个电话只在我的 index.tsx 文件上。像这样：

ReactDOM.render(<App />, document.getElementById('root'));

所以在 App.tsx 中（在组件渲染方法中）我会做这样的事情：

  return (
  <div>
    <mycomponent1/>
    <mycomponent2/>
    <pnpcomponent/>
... many other components...
  </div>)

在 Sharepoint Online 中将基本控件（例如标签和文本框）添加到人员选择器中并做出反应

Add basic controls eg label and text box to people picker with react in Sharepoint Online

reactjs

sharepoint-online