javascript - 如何在 ReactJS 中使用 Unicode 渲染表情符号？

Question

在 ReactJS 中，表情符号有一个 unicode 表 http://apps.timwhitlock.info/emoji/tables/unicode并尝试遵循此 https://css-tricks.com/emoji-toggles/因此尝试渲染火箭表情符号(具有 unicode:U+1F680 但转换为 css 内容:\01F680):

<div style={{content: '\01F680'}}></div>

但是我得到了一个错误。这是正确的做法吗？

编辑

我想创建一个圆形/圆形按钮，表情符号居中于按钮的中间。

按钮的 CSS:

#emoji-button {
  border-radius: 19px;
  width: 38px;
  height: 38px;
}

和圆形/圆形按钮:

<button
  type="submit"
  id="emoji-button"
/>

有没有办法只创建可点击的表情符号图像？

编辑

按照您的建议使用 CSS:

#emoji-button {
  font-size: 15px;
  width: 30px;
  height: 30px;
  border-radius: 30px;
  text-align: center;
  background-color: white;
  border:0;
  position: absolute;
  right: -60px;
}

#emoji-button:before {
  content: "\01F426";
}

Answer 1

我不确定这是否是您正在寻找的，但我发现这是在 reactJS 中添加表情符号的好方法，尤其是当您没有 ESLint 失败消息时:

🚀

<span aria-label="a rocket blasting off" role="img">🚀</span>

将表情符号代码包裹在一个 span 中，并给它一个 role='img' 和一个 aria-label='description' 这样它也可以帮助其他开发者当他们阅读您的代码时。您还可以添加一个 id，然后您可以将其链接到您的 css 以进行样式设置。