SharePoint React渲染问题：fileContent属性未被listItems数据替换

问题出在你直接渲染了原始的fileContent模板，没有将当前listitem的属性值替换到模板的占位符中。按以下步骤修改：

1. 添加模板替换函数
   在组件类里新增一个方法，用来把模板字符串里的占位符替换成对应的数据值（假设你的模板占位符格式是{{字段名}}，比如{{Title}}）：

private replaceTemplateVars(template: string, data: any): string {
  return template.replace(/{{(\w+)}}/g, (match, key) => {
    return data[key] || match; // 如果没有对应属性，保留原占位符
  });
}

2. 修改render函数
   在map循环中，用当前的listitem数据处理fileContent，再渲染处理后的内容：

public render(): React.ReactElement<ILinkItemsWithReactProps> {
  return (
    <div className={styles.linkItemsWithReact}>
      <ol>
        {this.state.listitems.map((listitem, listitemkey) => {
          // 用当前listitem的数据替换模板占位符
          const renderedContent = this.replaceTemplateVars(this.state.fileContent, listitem);
          return (
            <li key={listitemkey}>
              {/* 如果fileContent包含HTML标签，用dangerouslySetInnerHTML渲染，否则直接输出 */}
              <a dangerouslySetInnerHTML={{ __html: renderedContent }} />
              {/* 若只是纯文本，用下面的写法：
              <a>{renderedContent}</a>
              */}
            </li>
          );
        })}
      </ol>
    </div>
  );
}

注意事项 #

• 如果你的模板占位符格式不是{{字段名}}，需要调整replaceTemplateVars里的正则表达式，比如如果是{字段名}，就改成/{(\w+)}/g。
• 使用dangerouslySetInnerHTML时要确保fileContent和listitem的数据是可信的，避免XSS攻击，尤其是在多人协作的SharePoint站点中。

内容的提问来源于stack exchange，提问作者Traicy Al khoury