Question

我在React项目中有一个表情符号选择器，可以用它将表情符号插入文本字段。插入后，表情符号可见并正确呈现。但是，如果插入了另一个，则所有先前的表情符号都将替换为未知字符符号。尽管每个表情符号都是完整有效的字符。我还尝试将消息存储在React State中，并以编程方式将它们往返于代码点之间进行转换，但问题仍然存在。请参见代码示例：https://gist.github.com/J-Cake/8ab27a809aaf0cf14a7e2b78cbcbacf2我想知道代码中是否存在简单错误，或者是否缺少更大的内容。

编辑：我可能会补充说，我在Ubuntu上对表情符号的支持可能很低，但查看表情符号测试页/表情符号确实呈现的事实，表明与表情符号无关问题。

编辑2：我还发现该问题仍然存在于JS控制台和Firefox中。

Answer 1

这是我在React项目中使用表情符号的方式：

emojis = [
  '128512',
  '128514',
  '128519'
];

emojis.map(emoji => <span>{String.fromCodePoint(emoji)}</span>)

如您所见，我使用十进制拼写。我猜十六进制也可以工作。

我使用以下图表：https://www.w3schools.com/charsets/ref_emoji_smileys.asp

编辑：

尽管您已修复它，但这是我的建议：

insert(emoji: BaseEmoji) {
    this.setState((prev: State) => ({
      messageContent: [
        ...prev.messageContent.slice(0, prev.cursorStart),
        ...[emoji.native.codePointAt(0)],
        ...prev.messageContent.slice(prev.cursorEnd + 1),
      ],
      cursorStart: prev.cursorStart + 1,
      cursorEnd: prev.cursorStart + 1,
    }));
  }

Answer 2

我找到了答案。

我正在阅读MDN文档，并注意到以下免责声明：

警告：：将空字符串("")用作分隔符时，不用用户可识别的字符分隔字符串（grapheme clusters ）或unicode字符（代码点），但使用UTF-16代码单元。这会摧毁surrogate pairs.，请参见“How do you get a string to a character array in JavaScript?” on StackOverflow.

如果我没有在控制台中发现任何奇怪的东西，我将完全消除这一点。我注意到每个表情符号都印有两个字符。我认为这是unicode的怪异错误，因此将其关闭。原来是在numerify函数中解决的；将str.split替换为Array.from(str)，并看到一个有效的示例。

通过JS插入后，Chromium无法渲染表情符号

2 个答案: