因为某些需要,创建了一个 iconfont 的组件,旨在根据 unicode 的 id??? 来创建对应的图标字体,大致用法是这样的

<Icon content="628" />

这样就会生成一段 html

<i class="iconfont">&#xe628;</i>

如果这样还好办,可以用 dangerouslySetInnerHTML 达到效果。

但是,有些情况下,需要达到如下效果

<Icon tagName="input" content="628" />

生成这样的 html

<input class="iconfont" type="button" value="&#xe628;" />

可是为什么不生成 <button type="button">&#xe628;</button> 呢(⊙o⊙)

如果在组件中直接拼字符串,会在页面上吧 &#xe628; 直接输出

const Icon = ({ content }) =>
  <input className="iconfont" type="button" defaultValue={`&#xe${content};`} />;

不过,把 unicode 稍微转换一下就可以啦 (●′ω`●)

const convertUnicode = input =>
  input.replace(/\\u(\w\w\w\w)/g, (a, b) =>
    String.fromCharCode(parseInt(b, 16))
  );

const Icon = ({ content }) =>
  <input class="iconfont" type="button" defaultValue={convertUnicode(`\\ue${content}`)} />;

--再怎么看都没有啦|´・ω・)ノ--