如何将CMS输出的字符串格式属性添加到React元素上

解决方案 #

你原来的写法无法运行，是因为JSX语法不支持直接传入字符串形式的属性集合，仅支持通过展开运算符（...）传入对象格式的属性。你需要先把CMS返回的属性字符串解析为键值对对象，再传入元素。

实现步骤 #

• 处理字符串中的HTML转义字符，把"这类实体替换为实际字符
• 将属性字符串分割为单个属性条目，拆分出属性名和属性值，组装成对象
• 在JSX中用展开运算符把属性对象绑定到元素上

完整可运行代码 #

function HelloWorld(props) {
  const fromCMS = `data-target="h1" data-content="Hello World"`;

  // 解析属性字符串为对象的工具函数
  const parseAttrString = (attrStr) => {
    // 替换HTML转义双引号，若有其他转义实体可替换为下方的通用解码方法
    const decodedStr = attrStr.replace(/"/g, '"');
    const attrObj = {};
    // 匹配所有 属性名="属性值" 格式的片段
    const attrMatches = decodedStr.match(/(\w+[-\w]*)\s*=\s*"([^"]*)"/g);
    
    if (attrMatches) {
      attrMatches.forEach(match => {
        const [key, value] = match.split('=').map(part => part.trim().replace(/^"|"$/g, ''));
        attrObj[key] = value;
      });
    }
    return attrObj;
  };

  const cmsAttrs = parseAttrString(fromCMS);

  return (
    <h1 {...cmsAttrs}>{props.content}</h1>
  )
}

补充说明 #

如果CMS返回的属性包含多种HTML转义字符，可使用浏览器原生能力做通用解码，避免正则遗漏场景：

const decodeHtml = (str) => {
  const txt = document.createElement('textarea');
  txt.innerHTML = str;
  return txt.value;
};

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