基于React实现已有HTML字符串与样式对象的组件渲染

没问题，这就给你实现一个满足需求的React组件，直接上代码和详细解释：

基础实现版本 #

这个版本直接将给定的obj和styling内置在组件中，快速实现需求：

import React from 'react';

const HtmlWithStyleComponent = () => {
  // 你的原始数据
  const obj = { 
    block1: '<div>TEST-1</div>', 
    block2: '<div>TEST-2</div>', 
  };
  const styling = { 
    block1: { fontSize: '12px', color: '#123456' }, 
    block2: { fontSize: '18px', color: '#153426' }, 
  };

  return (
    <div className="blocks-container">
      {/* 遍历所有区块，动态生成带样式的元素 */}
      {Object.entries(obj).map(([blockKey, htmlString]) => (
        <div
          key={blockKey}
          // 绑定对应的样式对象，React会自动转换为行内样式格式
          style={styling[blockKey]}
          // 使用dangerouslySetInnerHTML渲染原始HTML字符串
          dangerouslySetInnerHTML={{ __html: htmlString }}
        />
      ))}
    </div>
  );
};

export default HtmlWithStyleComponent;

通用可复用版本 #

如果需要让组件更灵活，支持外部传入区块和样式数据，可以改成props接收的形式：

import React from 'react';

// 组件接收blocks（HTML字符串对象）和styles（样式对象）作为props
const HtmlWithStyleComponent = ({ blocks, styles }) => {
  return (
    <div className="blocks-container">
      {Object.entries(blocks).map(([blockKey, htmlString]) => (
        <div
          key={blockKey}
          style={styles[blockKey]}
          dangerouslySetInnerHTML={{ __html: htmlString }}
        />
      ))}
    </div>
  );
};

// 使用示例
const App = () => {
  const obj = { 
    block1: '<div>TEST-1</div>', 
    block2: '<div>TEST-2</div>', 
  };
  const styling = { 
    block1: { fontSize: '12px', color: '#123456' }, 
    block2: { fontSize: '18px', color: '#153426' }, 
  };

  return <HtmlWithStyleComponent blocks={obj} styles={styling} />;
};

export default App;

关键细节说明 #

• 遍历区块：用Object.entries()获取每个区块的键和对应HTML字符串，实现动态渲染，不管你有多少个区块都能适配
• 样式绑定：直接将styling中的样式对象传给style属性，React会自动把驼峰式的CSS属性（比如fontSize）转换成浏览器识别的短横线格式（font-size）
• HTML渲染注意事项：dangerouslySetInnerHTML是React唯一支持渲染原始HTML的方式，但要特别注意：必须确保传入的HTML字符串是安全可信的，避免XSS攻击风险（比如不要渲染用户输入的未过滤HTML）

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