React使用switch渲染CMS文本类型时显示[object Object]如何解决

问题根源 #

dangerouslySetInnerHTML 要求 __html 属性值必须是纯HTML字符串。你代码中传入的 <p>{text.text}</p>、<h2>{text.text}</h2> 属于JSX语法，React编译后会生成JavaScript对象而非字符串，传入后自然会渲染为 [object Object]，和你控制台打印观测到的结果一致。

修复方案 #

方案1（推荐）：直接返回对应JSX，无需使用危险API #

如果text.text是CMS返回的纯文本内容，完全不需要用dangerouslySetInnerHTML，直接根据类型渲染对应标签即可，还能规避XSS安全风险：

import { TextBlock } from './ArticleBodyText.styles';

export const ArticleBodyText = ({ text }) => {
  const renderTextBlock = () => {
    switch (text.type) {
      case 'paragraph':
        // 如果你的TextBlock是styled-components组件，可直接用as属性指定渲染标签
        return <TextBlock as="p">{text.text}</TextBlock>;
        // 若不支持as属性，可写成 <p><TextBlock>{text.text}</TextBlock></p>
      case 'heading3':
        return <TextBlock as="h3">{text.text}</TextBlock>;
      case 'heading2':
        return <TextBlock as="h2">{text.text}</TextBlock>;
      default:
        return null;
    }
  };
  return <div>{renderTextBlock()}</div>;
};

方案2：仅当text.text本身带HTML富文本内容时使用dangerouslySetInnerHTML #

如果text.text包含需要解析的HTML标签（比如加粗、斜体、链接等富文本标记），需要手动拼接纯HTML字符串传入__html，不能直接传JSX对象：

import { TextBlock } from './ArticleBodyText.styles';

export const ArticleBodyText = ({ text }) => {
  const renderTextBlock = () => {
    let tagName = '';
    switch (text.type) {
      case 'paragraph':
        tagName = 'p';
        break;
      case 'heading3':
        tagName = 'h3';
        break;
      case 'heading2':
        tagName = 'h2';
        break;
      default:
        return null;
    }
    // 拼接纯HTML字符串
    const htmlString = `<${tagName}>${text.text}</${tagName}>`;
    return <TextBlock dangerouslySetInnerHTML={{ __html: htmlString }} />;
  };
  return <div>{renderTextBlock()}</div>;
};

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