如何在 React 中将 Unicode 字符作为函数参数传递答案

【问题标题】：How to pass Unicode characters as function parameters in React如何在 React 中将 Unicode 字符作为函数参数传递
【发布时间】：2017-10-25 15:45:41
【问题描述】：

我正在尝试实现与此问题类似的事情 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 字符为参数的函数？

【问题讨论】：

标签： javascript reactjs svg unicode

【解决方案1】：

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

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

我把它渲染成

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

这暂时解决了我的问题。

【讨论】：

【解决方案2】：

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

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

【讨论】：