Добавьте базовые элементы управления, например, метку и текстовое поле, для выбора людей с помощью реакции в Sharepoint Online.

Question

У меня есть код ниже, чтобы отобразить подборщик людей в Sharepoint онлайн с помощью React Framework.Как добавить основные элементы управления, такие как метки, текстовые поля и кнопки.

    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

Я предлагаю вам создать новый реактивный компонент, чтобы обернуть ваши компоненты.Кроме того, ваш метод render () в первом блоке кода немного странный ... Посмотрите на второй блок, нет вызова ReactDom.render.

Обычно этот вызов только для моего index.tsxфайл.Примерно так:

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

Итак, внутри App.tsx (в методе рендеринга компонента) я бы сделал что-то вроде этого:

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