如何在SPFx扩展中导入TSX并使用React组件

Hey there! Let's walk through getting your React Navbar component up and running in your SPFx Application Customizer. I’ve helped plenty of folks work through this exact hurdle when starting out with SPFx, so let’s break it down step by step.

1. 先确认项目依赖配置 #

First things first: make sure your project has all the React dependencies it needs. If you initialized your SPFx extension without explicitly selecting React, you’ll need to add these manually. Run these commands in your project root:

npm install react react-dom --save
npm install @types/react @types/react-dom --save-dev

2. 检查Navbar组件的导出方式 #

Double-check that your Navbar.tsx component is properly exported so it can be imported into your application customizer. A simple example of a working Navbar component might look like this:

// components/Navbar.tsx
import * as React from 'react';

// 可以根据需求添加props接口，比如接收SPFx上下文
interface INavbarProps {
  // 示例：如果需要用到站点信息，可以在这里定义
  siteTitle?: string;
}

const Navbar = ({ siteTitle = "My SharePoint Site" }: INavbarProps) => {
  return (
    <nav style={{ background: "#0078d4", padding: "12px 20px", color: "#fff" }}>
      <h2>{siteTitle}</h2>
      <div style={{ marginLeft: "20px", display: "inline-block" }}>
        <a href="#" style={{ color: "#fff", marginRight: "15px" }}>Home</a>
        <a href="#" style={{ color: "#fff", marginRight: "15px" }}>Documents</a>
        <a href="#" style={{ color: "#fff" }}>Teams</a>
      </div>
    </nav>
  );
};

export default Navbar;

Make sure you’re using either a default export (like above) or a named export—just be consistent when importing it later.

3. 在Application Customizer中挂载React组件 #

Now let’s modify your ReactSharePointNavbarApplicationCustomizer.tsx to render the Navbar into a SharePoint placeholder. The key here is using ReactDOM.render to attach your component to the placeholder’s DOM element, and cleaning it up properly to avoid memory leaks.

Here’s a working example:

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';

// 导入你的Navbar组件，注意路径要匹配你的目录结构
import Navbar from './components/Navbar';

const LOG_SOURCE: string = 'ReactSharePointNavbarApplicationCustomizer';

export interface IReactSharePointNavbarApplicationCustomizerProperties {
  // 可以在这里定义配置属性，比如从SPFx属性面板传入的导航数据
}

export default class ReactSharePointNavbarApplicationCustomizer
  extends BaseApplicationCustomizer<IReactSharePointNavbarApplicationCustomizerProperties> {

  private _topPlaceholder: PlaceholderContent | undefined;

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

    // 监听占位符变化事件，触发组件渲染
    this.context.placeholderProvider.changedEvent.add(this, this._renderPlaceHolders);

    return Promise.resolve();
  }

  private _renderPlaceHolders(): void {
    // 尝试获取顶部占位符（你也可以用Bottom等其他占位符，根据需求调整）
    if (!this._topPlaceholder) {
      this._topPlaceholder = this.context.placeholderProvider.tryCreateContent(
        PlaceholderName.Top,
        { onDispose: this._onDispose }
      );

      if (!this._topPlaceholder) {
        Log.error(LOG_SOURCE, new Error('Could not access the Top placeholder'));
        return;
      }

      // 挂载React组件到占位符的DOM元素中
      if (this._topPlaceholder.domElement) {
        ReactDOM.render(
          // 如果需要传递props，比如SPFx上下文，直接在这里传入即可
          <Navbar siteTitle={this.context.pageContext.web.title} />,
          this._topPlaceholder.domElement
        );
      }
    }
  }

  // 组件销毁时清理React实例，避免内存泄漏
  private _onDispose(): void {
    if (this._topPlaceholder?.domElement) {
      ReactDOM.unmountComponentAtNode(this._topPlaceholder.domElement);
    }
  }
}

4. 验证路径与文件结构 #

Double-check that your file paths are correct. If your ReactSharePointNavbarApplicationCustomizer.tsx is in the root of your extension folder and Navbar.tsx is in a components subfolder, the import path ./components/Navbar should work. Adjust the path if your directory structure is different.

5. 测试运行 #

Run gulp serve to start the local workbench, then navigate to your SharePoint site. You should see your custom React navbar rendered in the top placeholder area. If something breaks, open your browser’s developer tools (F12) to check for errors—common issues include incorrect import paths, missing dependencies, or typos in component exports.

内容的提问来源于stack exchange，提问作者typekev