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

2024-05-15 • 问答

我有以下 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} - 但是在第一段中显示了文本 🐮，而在第二段中显示了表情符号?。

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

重新考虑后，这个问题不是一个明显的重复，因为它专门处理只能用 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 (Gatbsy) 中以编程方式显示表情符号

zhijiefang 回答：在 JSX (Gatbsy) 中以编程方式显示表情符号

大家都在问