Question

我正在努力实现类似于这个问题的东西 How do I include a font awesome icon in my svg?

但我有10个图标，它们具有相似的结构，但只有图标不同我已经返回一个函数来生成unicode字符如

static renderIcon (status) {
    if (status === 'RED') {
      return '&#xf126;'
    } else if (status === 'GREEN') {
      return '&#xf121;'
    } else if (status === YELLOW') {
      return '&#xf11d;'
    }
  }

static renderTextWithIcon = (obj) => {
    return (
        <text x={params.cx} y={params.cy}
         className={ css.color}
         >
          {Utils.renderStatusIconContent(obj.status)}
        </text>
        )
  }

但如果我尝试在没有引号的情况下将字符串呈现为“”，则会将字符串呈现为“”并显示图标，但我必须为每种颜色重复相同的代码有人可以帮助编写一个以unicode字符为参数的函数吗？

Answer 1

如果我找到你，你需要使用dangerouslySetInnerHTML，这样你的unicode字符就不会被转义。

<text x={params.cx} y={params.cy}
  className={ css.color}
  dangerouslySetInnerHTML={{__html: Utils.renderStatusIconContent(obj.status) }}
/>

Answer 2

@AlexM感谢您的解决方案但我以一种不同的方式解决了这种情况我这样做了

 static iconObj = {
    Right: '\uf126',
    Wrong: '\uf121',
  };

我正在将其渲染为

<text x={params.cx} y={yParam}
         dy=".25em"
         onClick={onClick}>
          {iconObj[color]}
        </text>

这解决了我现在的问题。

如何在React中将unicode字符作为函数参数传递

2 个答案: