Chromium 在通过 JS 插入后无法呈现表情符号

Question

我在 React 项目中有一个表情符号选择器，我可以用它来将表情符号插入文本字段。插入后，表情符号可见并正确呈现。但是，如果插入另一个，则之前的所有表情符号都将替换为未知字符符号。尽管每个表情符号都是完整且有效的字符。我还尝试将消息存储在 React 状态中，并以编程方式将它们在代码点之间来回转换，但问题仍然存在。请参阅代码示例：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 文档并注意到此免责声明：

Warning: When the empty string ("") is used as a separator, the string is not split by user-perceived characters (grapheme clusters) or unicode characters (codepoints), but by UTF-16 codeunits. This destroys surrogate pairs. See “How do you get a string to a character array in JavaScript?” on Whosebug.

如果我没有注意到控制台中有什么奇怪的地方，我会完全忽略它。我注意到每个表情符号打印了两个字符。我认为这是 unicode 的一个奇怪错误，并忽略了它。原来修复是在 numerify 函数中；将 str.split 替换为 Array.from(str) 并查看一个工作示例。

Chromium 在通过 JS 插入后无法呈现表情符号

Chromium cannot render emojis after inserting through JS

html

rendering

emoji

typescript

reactjs