以下是 SharePoint Online SPFx Web 部件绑定数据的一般步骤：
- 提前创建好数据列表。
- 用 Visual Studio Code 打开 web 部件文件。
- 在头部定义列表模型，例如：
export interface IList { value: IListItem[]; } export interface IListItem { title: string; id: string; }
- 添加执行 REST API 请求的帮助程序类
spHttpClient：
import { spHttpClient, SPHttpClientResponse } from '@microsoft/sp-http';
- 添加请求数据的方法，调用 REST 服务获取数据，方法如下：
private _getListData(): Promise<IList> { return this.context.spHttpClient.get(this.context.pageContext.web.absoluteUrl + `/_api/web/lists/getbytitle('YourListTitle')/items`, SPHttpClient.configurations.v1) .then((response: SPHttpClientResponse) => { return response.json(); }); }
将 'YourListTitle' 替换为实际的列表标题。
- 添加渲染数据的方法，渲染成需要展示的格式，方法如下：
private _renderList(items: IListItem[]): void { let html: string = ''; items.forEach((item: IListItem) => { html += `<div>${item.title}</div>`; }); const listContainer: Element = this.domElement.querySelector('#myContainer'); listContainer.innerHTML = html; }
- 修改渲染 web 部件的方法，将获取的数据渲染到 web 部件，方法如下：
public render(): void { this.domElement.innerHTML = `<div id="myContainer" />`; this._getListData() .then((response) => { this._renderList(response.value); }); }
完成上述步骤后，SPFx Web 部件就可以从 SharePoint 网站中获取指定列表的数据，并进行相应的渲染和展示。之后，你可以把部件部署到网站中使用。
请注意，SharePoint 的配置和具体的 API 可能会因版本和环境而有所不同，某些情况下可能需要根据实际情况进行调整。上述代码是一个基本的示例，实际开发中可能需要根据具体需求进行修改和扩展。同时，确保你具有访问 SharePoint 数据的适当权限。
