如何將tsx導入SPFx擴展

Question

我剛剛開始我的第一個SharePoint項目，並且無法弄清楚如何在擴展中使用React組件。 以下是相關文件。

Navbar.tsx：

import * as React from "react";
export const Navbar = props => <div>Hello world</div>;

ReactSharePointNavbarApplicationCustomizer.tsx：

import { override } from "@microsoft/decorators";
import { Log } from "@microsoft/sp-core-library";
import {
  BaseApplicationCustomizer,
  PlaceholderContent,
  PlaceholderName
} from "@microsoft/sp-application-base";
import { Dialog } from "@microsoft/sp-dialog";

import * as strings from "ReactSharePointNavbarApplicationCustomizerStrings";

import styles from "./AppCustomizer.module.scss";
import { escape } from "@microsoft/sp-lodash-subset";

import * as Components from "./components";
import Navbar = Components.Navbar;

const LOG_SOURCE: string = "ReactSharePointNavbarApplicationCustomizer";

/**
 * If your command set uses the ClientSideComponentProperties JSON input,
 * it will be deserialized into the BaseExtension.properties object.
 * You can define an interface to describe it.
 */

export interface IReactSharePointNavbarApplicationCustomizerProperties {}

/** A Custom Action which can be run during execution of a Client Side Application */
export default class ReactSharePointNavbarApplicationCustomizer extends BaseApplicationCustomizer<
  IReactSharePointNavbarApplicationCustomizerProperties
> {
  private _onDispose(): void {
    console.log("No place holder.");
  }
  private _topPlaceholder: PlaceholderContent | undefined;
  private _renderPlaceHolders(): void {
    if (!this._topPlaceholder) {
      this._topPlaceholder = this.context.placeholderProvider.tryCreateContent(
        PlaceholderName.Top,
        { onDispose: this._onDispose }
      );

      if (!this._topPlaceholder) {
        return;
      }

      if (this.properties) {
        const Nav = Navbar(null);

        if (this._topPlaceholder.domElement) {
          this._topPlaceholder.domElement.innerHTML = `
            <div class="${styles.app}">
              <div class="ms-bgColor-themeDark ms-fontColor-white ${
                styles.top
              }">
               ${Nav}
               ${Navbar}
               <div>Hello</div>
              <Navbar/>
              </div>
            </div>`;
        }
      }
    }
  }

  @override
  public onInit(): Promise<void> {
    Log.info(LOG_SOURCE, `Initialized ${strings.Title}`);

    // Added to handle possible changes on the existence of placeholders.
    this.context.placeholderProvider.changedEvent.add(
      this,
      this._renderPlaceHolders
    );

    // Call render method for generating the HTML elements.
    this._renderPlaceHolders();
    return Promise.resolve<void>();
  }
}

組件：

export * from "./Navbar";

我的目標是將我的react組件用作導航欄，但是在這種情況下我無法設法將tsx和ts結合起來。

我遵循了該指南： https : //docs.microsoft.com/zh-cn/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions

在這些文件之外，我所做的唯一修改是添加了一個components文件夾，其中包含您在上面看到的component和index。

請幫助我解決這個挑戰。

Answer 1

經過幾個小時的努力，我找到了解決方案。 我走錯路了，我需要使用ReactDOM插入我的TSX組件。 之后是正常的React開發。 無需像以前一樣嘗試以某種奇特的方式插入元素。

這是工作代碼。

ReactSharePointNavbarApplicationCustomizer.ts ：

import * as React from "react";
import * as ReactDOM from "react-dom";
import { override } from "@microsoft/decorators";
import { Log } from "@microsoft/sp-core-library";
import {
  BaseApplicationCustomizer,
  PlaceholderContent,
  PlaceholderName
} from "@microsoft/sp-application-base";

import { Dialog } from "@microsoft/sp-dialog";

import * as strings from "ReactSharePointNavbarApplicationCustomizerStrings";

import styles from "./AppCustomizer.module.scss";
import { escape } from "@microsoft/sp-lodash-subset";

import Navbar, { INavbarProps } from "./components/Navbar";

const LOG_SOURCE: string = "ReactSharePointNavbarApplicationCustomizer";

export interface IReactSharePointNavbarApplicationCustomizerProperties {}

export default class ReactSharePointNavbarApplicationCustomizer extends BaseApplicationCustomizer<
  IReactSharePointNavbarApplicationCustomizerProperties
> {
  private _onDispose(): void {}

  private onRender(): void {
    const header: PlaceholderContent = this.context.placeholderProvider.tryCreateContent(
      PlaceholderName.Top,
      {
        onDispose: this._onDispose
      }
    );
    if (!header) {
      Log.error(LOG_SOURCE, new Error("Could not find placeholder PageHeader"));
      return;
    }

    const elem: React.ReactElement<INavbarProps> = React.createElement(Navbar);
    ReactDOM.render(elem, header.domElement);
  }

  @override
  public onInit(): Promise<void> {
    this.onRender();
    return Promise.resolve<void>();
  }
}

Navbar.tsx ：

import * as React from "react";
import styles from "./Navbar.module.scss";

import NavbarItem from "../NavbarItem";

export interface INavbarProps {}

export default class Navbar extends React.Component<INavbarProps> {
  constructor(props: INavbarProps) {
    super(props);
  }

  public render(): JSX.Element {
    return (
      <div className={"ms-bgColor-themeDark ms-fontColor-white " + styles.nav}>
        Hello world
      </div>
    );
  }
}

如您所見，components.ts導出文件是不必要的。 而且我確信在這些示例中其他代碼可能仍然沒有用。

我發現將tsx組件導入其他tsx組件的工作方式與正常的React導入一樣。 只需導入並插入為元素即可。