React JSX 中 unicode 的处理

·
科技react

因为某些需要，创建了一个 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}`)} />;