ReactJs如何将HTML及字符串模板占位符替换为自定义组件？

• react-html-parser执行完成后输出的是React元素对象数组，而非原始字符串，react-string-replace仅支持对字符串内容做匹配替换，无法识别React元素结构中的文本占位符，因此组合使用失效。

方案1：使用react-html-parser自带的transform配置（推荐） #

无需额外引入替换库，直接在HTML解析阶段完成占位符替换，性能与兼容性最优。
实现代码：

import ReactHtmlParser from 'react-html-parser';
import ContactUsForm from './ContactUsForm';

// 组件内部渲染逻辑
const getPageContent = () => {
  const parseOptions = {
    transform: (node) => {
      // 匹配包含占位符的文本节点
      if (node.type === 'text' && node.data.includes('{CONTACT_US_FORM}')) {
        const textFragments = node.data.split('{CONTACT_US_FORM}');
        // 拆分文本并插入表单组件
        return textFragments.flatMap((fragment, index) => {
          const nodes = [];
          if (fragment) nodes.push(fragment);
          if (index !== textFragments.length - 1) {
            nodes.push(<ContactUsForm key={`contact-form-${index}`} />);
          }
          return nodes;
        });
      }
    }
  };
  return ReactHtmlParser(page.content, parseOptions);
};

return <div>{getPageContent()}</div>;

方案2：调整执行顺序，先替换再解析 #

如果需要保留react-string-replace的使用，可先对原始HTML字符串做占位符替换，再执行HTML解析：

import ReactHtmlParser from 'react-html-parser';
import reactStringReplace from 'react-string-replace';
import ContactUsForm from './ContactUsForm';

const getPageContent = () => {
  // 第一步：将字符串中的占位符替换为自定义HTML标签
  let processedHtml = reactStringReplace(page.content, '{CONTACT_US_FORM}', (match, i) => (
    `<custom-contact-form data-key="${i}"></custom-contact-form>`
  )).join('');

  // 第二步：解析HTML时将自定义标签转换为React组件
  const parseOptions = {
    transform: (node) => {
      if (node.name === 'custom-contact-form') {
        return <ContactUsForm key={node.attribs['data-key']} />;
      }
    }
  };
  return ReactHtmlParser(processedHtml, parseOptions);
};

return <div>{getPageContent()}</div>;

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