React将HTML转换为Component并传递额外的道具

Question

我正在使用[svg-inline-loader][1]在我的React应用程序中内联SVG图像。

当我导入SVG时，webpack模块将其作为HTML字符串传递给变量。我需要将此字符串转换为React Component，以便我可以向其传递额外的道具。

我目前的代码如下所示

import SVGlogo from './logo.svg';

export default () => (
  <a href="/" className="navbar-item is-purple" dangerouslySetInnerHTML={{ __html: SVGlogo }} /> 
);

这很好但我需要将其他属性/道具传递给SVGlogo。有没有办法我可以优雅地做到这一点，而无需手动修改字符串并向其添加属性。

Answer 1

我强烈建议为SVG内容构建一个自己的非类组件，然后将其导入到/ HOC组件中。

请参阅我的示例：

问候！