在JSX（Gatsby）中以编程方式显示Emoji的问题

你遇到的问题核心是React对JSX中变量文本的自动转义机制，再加上代码里有个小语法错误，咱们一步步解决：

首先先修正那个语法错误：你写的milkoji.[milk]多了个不必要的点，应该改成milkoji[milk]，不然代码会直接报错，这是先得搞定的基础问题。

接下来为什么第一个<p>显示的是文本而不是emoji？因为React在渲染JSX变量里的字符串时，会自动转义所有HTML/Unicode实体——也就是说，你拼出来的🐮会被当成纯文本输出，而不会被浏览器解析成对应的emoji字符。而第二个<p>里直接写的🐮属于JSX的静态内容，会被React正常解析。

下面给你两种可行的修复方案：

方案一：直接存储Emoji字符 #

最简单的方式就是把milkoji里的值换成直接的emoji字符，这样直接渲染变量就能显示正确的表情：

import * as React from 'react'
const CheeseIcons = ({ milk }) => {
  // 直接用emoji字符代替十六进制码点字符串
  const milkoji = { Cow:'🐮', Goat: '🐐' }
  // 修正语法错误：去掉多余的点
  const icon = milkoji[milk];
  return (
    <main>
      <p>{icon}</p>
      <p>&#x1F42E;</p>
    </main>
  )
}
export default CheeseIcons

方案二：用String.fromCodePoint解析码点 #

如果你坚持要保留十六进制码点的存储方式，可以用String.fromCodePoint把码点字符串转换成对应的字符：

import * as React from 'react'
const CheeseIcons = ({ milk }) => {
  const milkoji = { Cow:'1F42E', Goat: '1F410' }
  // 把十六进制字符串转成数值，再用fromCodePoint生成字符
  const icon = String.fromCodePoint(parseInt(milkoji[milk], 16));
  // 也可以写成：String.fromCodePoint(`0x${milkoji[milk]}`)
  return (
    <main>
      <p>{icon}</p>
      <p>&#x1F42E;</p>
    </main>
  )
}
export default CheeseIcons

两种方案都能让第一个<p>正确显示emoji，选哪种取决于你更习惯哪种存储方式~

内容的提问来源于stack exchange，提问作者Lone Wallaby