React中如何将HTML字符串转为组件并传递额外Props？

你当前用dangerouslySetInnerHTML的方式虽然能渲染SVG，但确实没法灵活传递props，这里有两种优雅的解决方案，推荐第一种：

方案一：使用@svgr/webpack直接将SVG转为React组件（推荐） #

这是React生态中处理SVG最常用的方案，它能直接把SVG文件编译成React组件，导入后就能像普通组件一样传递props，完全不需要处理字符串。

步骤： #

1. 安装依赖：

npm install @svgr/webpack --save-dev
# 或者用yarn
yarn add @svgr/webpack --dev

2. 修改webpack配置，替换原有的svg-inline-loader：
   在你的webpack配置文件（比如webpack.config.js或者craco.config.js如果用Create React App的话）中，添加或修改SVG的loader规则：

module.exports = {
  module: {
    rules: [
      {
        test: /\.svg$/i,
        issuer: /\.[jt]sx?$/,
        use: ['@svgr/webpack'],
      },
    ],
  },
};

如果需要同时保留SVG的原始结构（关闭默认压缩），可以配置选项：

{
  test: /\.svg$/i,
  issuer: /\.[jt]sx?$/,
  use: [
    {
      loader: '@svgr/webpack',
      options: {
        svgo: false, // 可选，关闭svg压缩
      },
    },
  ],
}

3. 使用方式：
   现在你可以直接导入SVG作为React组件，随意传递props：

import SVGlogo from './logo.svg';

export default () => (
  <a href="/" className="navbar-item is-purple">
    <SVGlogo width="32" height="32" className="custom-logo" fill="#6a1b9a" />
  </a>
);

所有传递给SVGlogo的props都会直接应用到根SVG元素上，完全不需要手动处理字符串。

方案二：将SVG字符串转为React元素（不换loader的备选） #

如果暂时不想替换svg-inline-loader，可以用react-html-parser库把HTML字符串转为React元素，并通过自定义处理器添加props：

步骤： #

1. 安装依赖：

npm install react-html-parser --save
# 或者yarn
yarn add react-html-parser

2. 使用方式：

import SVGlogo from './logo.svg';
import ReactHtmlParser, { processNodes, convertNodeToElement } from 'react-html-parser';

export default () => {
  // 自定义处理器，给SVG根元素添加props
  const processNode = (node, index) => {
    if (node.type === 'tag' && node.name === 'svg') {
      // 合并原属性和自定义props
      node.attribs = {
        ...node.attribs,
        width: '32',
        height: '32',
        className: 'custom-logo',
        fill: '#6a1b9a',
      };
    }
    return convertNodeToElement(node, index, processNode);
  };

  return (
    <a href="/" className="navbar-item is-purple">
      {ReactHtmlParser(SVGlogo, { processNodes: (nodes) => processNodes(nodes, processNode) })}
    </a>
  );
};

这种方式不需要修改webpack配置，但代码相对繁琐，不如第一种方案简洁。

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