在 JSX (Gatsby) 中以编程方式显示表情符号

Question

我有以下 JSX 代码：

import * as React from 'react'

const CheeseIcons = ({ milk }) => {
  const milkoji = {
    Cow:'1F42E',
    Goat: '1F410'
  }

  const icon = "&#x" + milkoji.[milk] + ";";
  return (
    <main>
      <p>{icon}</p>
      <p>&#x1F42E;</p>
    </main>
  )
}

export default CheeseIcons

我将 Cow 正确传递为 {milk} - 但在第一段中显示的是文本 🐮，而在第二段中显示的是表情符号。

如何让表情符号显示在第一段中？

Answer 1

经过重新考虑，这个问题不是明显的重复，因为它专门处理只能使用代理对以 UTF-16 编码的表情符号，这使得链接问题的答案不合适。

因此你会这样做：

const CheeseIcons = ({ milk }) => {
  const milkoji = {
    Cow: 0x1F42E, // Attention
    Goat: 0x1F410
  }

  return (
    <main>
      <p>{String.fromCodePoint(milkoji[milk])}</p>
    </main>
  )
}

请注意，我们使用 String.fromCodePoint 而不是 String.fromCharCode，因为上面的值是代码点（但不是编码这些表情符号的有效 UTF-16 字节）。

在 JSX (Gatsby) 中以编程方式显示表情符号

Displaying emojis programmatically in JSX (Gatbsy)

javascript

jsx

emoji