Question

在ReactJS中，emojis http://apps.timwhitlock.info/emoji/tables/unicode有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

自第5版以来，八位文字在严格模式下为dropped from ECMAScript。

但是，出于其他原因，使用＆＃39; \ U＆＃39;在unicode工作之前。然而，你的情况的问题是没有反应或unicode。当作为伪元素插入时，似乎unicode emojis工作得最好。

不幸的是，you can't create inline css :before或:after个伪元素。您最好的选择是链接外部css文件，然后定位div或类并定义内容规则。

div:after {
  content: '\01F680';
}

同样，unicode表情符号使用伪元素（:before或:after）。

编辑：这里a jsfiddle that shows this idea正在行动中。

Answer 2

content属性只能与:before和:after伪元素一起使用，而这些元素不能通过内联CSS使用。此外，JavaScript严格模式下的unicode字符必须双重转义，否则会引发错误，因为\01F680被解析为无效的转义序列。要逃避\加倍\\01F680。

制作一个模块，让您在名为Style It的React组件中编写明文CSS，并使用它来演示CSS-Tricks中的HTML / CSS。

npm install style-it --save

表情符号切换（OPEN IN JSFIDDLE）

import React from 'react';
import Style from 'style-it';

class Intro extends React.Component {
  render() {
    return Style.it(`
      .emoji-toggle {
        position: relative;
        width: 60px;
        margin: 40px auto;
      }
      .emoji-toggle .well {
        display: block;
        background: #eee;
        height: 20px;
        border-radius: 10px;
        cursor: pointer;
      }
      .emoji-toggle .toggle {
        opacity: 0;
        border: 0;
        outline: none;
        height: 100%;
        width: 100%;
        background: transparent;
        position: absolute;
        cursor: pointer;
        z-index: 100;
      }
      .emoji-toggle .toggle ~ .emoji:before {
        content: "\\01F431";
        position: absolute;
        left: 0;
        top: -15px;
        font-size: 40px;
        -webkit-transition: 0.2s;
        transition: 0.2s;
      }
      .emoji-toggle .toggle:checked ~ .emoji:before {
        left: 100%;
        margin-left: -1em;
      }
      .emoji-toggle .toggle ~ label {
        white-space: nowrap;
      }
      .emoji-toggle .toggle ~ label:before {
        position: absolute;
        right: 100%;
        margin-right: 5px;
        top: 0;
      }
      .emoji-toggle .toggle ~ label:after {
        position: absolute;
        left: 100%;
        margin-left: 5px;
        top: 0;
      }
      .emoji-travel .toggle ~ .emoji:before {
        content: "✈";
      }
      .emoji-travel .toggle:checked ~ .emoji:before {
        content: "";
      }
      .emoji-travel .toggle ~ label:before {
        content: "Plane";
      }
      .emoji-travel .toggle ~ label:after {
        content: "Train";
      }
    `,
      <div className="emoji-toggle emoji-travel">
        <input type="checkbox" id="toggle2" className="toggle" />
        <div className="emoji" />
        <label htmlFor="toggle2" className="well" />
      </div>
    );
  }
}

ReactDOM.render(
  <Intro />,
  document.getElementById('container')
);

可点击按钮表情符号（OPEN IN JSFIDDLE）

更改font-size以增大或缩小表情符号。 width，height和border-radius应该是font-size所设置的两倍 - 所以如果font-size: 10px;则width: 20px; height 20px; border-radius: 20px;。

import React from 'react';
import Style from 'style-it';

class Intro extends React.Component {
  render() {
    return Style.it(`
      .emoji {
        font-size: 20px;
        height: 40px;
        width: 40px;
        border-radius: 40px;
        text-align: center;
      }
      .emoji:active:before {
        opacity: .7;
      }
      .emoji:before {
        content: "\\01F431";
      }
    `,
      <button className="emoji" />
    );
  }
}

ReactDOM.render(
  <Intro />,
  document.getElementById('container')
);

编辑：每次编辑更新和简化

Answer 3

我不确定这是否是您要寻找的东西，但是我发现这是在reactJS中添加表情符号的好方法，尤其是这样您就不会收到ESLint失败消息：

?

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

将emoji表情代码包装在一个范围内，并给它一个role='img'和一个aria-label='description'，以便它在其他开发人员阅读您的代码时也有帮助。您还可以添加一个ID，然后可以将其链接到CSS以进行样式设置。

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

3 个答案: