我正在开发一个SharePoint框架扩展来在SharePoint中显示聊天机器人。虽然有Github Repos有这方面的代码，但它们都是在旧版本的框架上。我正在尝试在最新版本中创建这个。
我从小处着手，只是想看看是否可以渲染自定义HTML元素，但我还不能让它工作。当我直接在应用程序定制器文件中使用自定义div元素时，我可以渲染它们，但当我尝试从一个单独的文件中渲染react组件时，它不会渲染。我在下面的文件中提供了代码。任何见解都将非常感谢。
节点版本16.19.0 SharePoint框架版本1.16.1
package.json

{
  "name": "eva-pva-popup-chat",
  "version": "0.0.1",
  "private": true,
  "engines": {
    "node": ">=16.13.0 <17.0.0"
  },
  "main": "lib/index.js",
  "scripts": {
    "build": "gulp bundle",
    "clean": "gulp clean",
    "test": "gulp test"
  },
  "dependencies": {
    "@microsoft/decorators": "1.16.1",
    "@microsoft/sp-application-base": "1.16.1",
    "@microsoft/sp-core-library": "1.16.1",
    "@microsoft/sp-dialog": "1.16.1",
    "@microsoft/sp-office-ui-fabric-core": "^1.16.1",
    "react": "^17.0.2",
    "tslib": "2.3.1"
  },
  "devDependencies": {
    "@microsoft/eslint-config-spfx": "1.16.1",
    "@microsoft/eslint-plugin-spfx": "1.16.1",
    "@microsoft/rush-stack-compiler-4.5": "0.2.2",
    "@microsoft/sp-build-web": "1.16.1",
    "@microsoft/sp-module-interfaces": "1.16.1",
    "@rushstack/eslint-config": "2.5.1",
    "@types/webpack-env": "~1.15.2",
    "ajv": "^6.12.5",
    "gulp": "4.0.2",
    "typescript": "4.5.5"
  }
}

EvapvapopupchatApplicationCustomizer.ts

import { Log } from '@microsoft/sp-core-library';
import {
  BaseApplicationCustomizer, PlaceholderContent, PlaceholderName
} from '@microsoft/sp-application-base';
import * as React from "react";
import * as ReactDOM from "react-dom";
import evapvapopupchat, { IEvaPvaPopupChatProps } from './components/evapvapopupchat';
import * as strings from 'EvapvapopupchatApplicationCustomizerStrings';

const LOG_SOURCE: string = 'EvapvapopupchatApplicationCustomizer';

export interface IEvapvapopupchatApplicationCustomizerProperties {}

export default class EvapvapopupchatApplicationCustomizer
  extends BaseApplicationCustomizer<IEvapvapopupchatApplicationCustomizerProperties> {
  
  //private _topPlaceholder: PlaceholderContent | undefined;
  private _bottomPlaceholder: PlaceholderContent | undefined;

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

    // Wait for the placeholders to be created (or handle them being changed) and then
    // render.
    this.context.placeholderProvider.changedEvent.add(this, this._renderPlaceHolders);

    this._renderPlaceHolders();
    return Promise.resolve();
  }

  private _renderPlaceHolders(): void {
    console.log("EvapvapopupchatApplicationCustomizer._renderPlaceHolders()");
    console.log(
      "Available placeholders: ",
      this.context.placeholderProvider.placeholderNames
        .map(name => PlaceholderName[name])
        .join(", ")
    );

    // Handling the bottom placeholder
    if (!this._bottomPlaceholder) {
      this._bottomPlaceholder = this.context.placeholderProvider.tryCreateContent(
        PlaceholderName.Bottom,
        { onDispose: this._onDispose }
      );

      // The extension should not assume that the expected placeholder is available.
      if (!this._bottomPlaceholder) {
        console.error("The expected placeholder (Bottom) was not found.");
        return;
      }

      //Get component from evapvapopupchat.tsx and render
      const elem: React.ReactElement<IEvaPvaPopupChatProps> =
        React.createElement(evapvapopupchat);

      ReactDOM.render(elem, this._bottomPlaceholder.domElement);
    }
  }

  private _onDispose(): void {
    console.log('[EvapvapopupchatApplicationCustomizer._onDispose] Disposed bottom placeholders.');
  }
}

/组件/蒸发器蒸发器输出.tsx

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

export interface IEvaPvaPopupChatProps {
    //Add properties here
}

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

    public render() {
        return (
            <div className={styles.botButton}>
                <p className={styles.botButtonText}>Chat with EVA</p>
            </div>
        );
    }
}