ReactJSでUnicodeを使って絵文字をレンダリングするには？ ReactJSで

Question

は、そこ絵文字http://apps.timwhitlock.info/emoji/tables/unicodeのUnicodeテーブルであり、このhttps://css-tricks.com/emoji-toggles/そうロケット絵文字をレンダリングしようとする試みなさ以下試み（ユニコード有する：U + 1F680をものの、CSSコンテンツに変換：\ 01F680）を有する：

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

しかし、私はエラーが発生しました。これは正しい方法ですか？

私はそれの真ん中に中心絵文字付きラウンド/丸ボタンを作成したい

EDIT。

ボタンの

CSS：

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

とラウンド/丸ボタン：

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

そして、ちょうど絵文字画像自体クリッカブルを作成する方法はありますか？ CSSで

EDIT

あなたが示唆したように：

#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版以降strictモードでdropped from ECMAScriptました。

しかし、他の理由から、ユニコードが動作する前に '\ U'を使用してください。あなたのケースの問題は、しかし、反応しない、またはユニコードです。それは、擬似要素として挿入されたときに、ユニコードの絵文字が最もうまくいくようです。

残念なことに、you can't create inline css:beforeまたは:after疑似要素。最善の策は、外部のCSSファイルをリンクし、divまたはクラスをターゲットにしてコンテンツルールを定義することです。再び

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

、ユニコード絵文字は、擬似要素（:before又は:after）で動作します。

編集： ここにはa jsfiddle that shows this ideaの動作があります。

Answer 2

contentプロパティは、:beforeと:after疑似要素でのみ使用でき、これらはインラインCSSでは使用できません。さらに、JavaScript strictモードのUnicode文字は二重にエスケープする必要があります。それ以外の場合は、無効なエスケープシーケンスとして解析された\01F680が含まれているため、エラーがスローされます。 \を二重に\\01F680にエスケープする。

Style Itというリアクションコンポーネントでプレーンテキスト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') 
); 

編集：私はそれを試してみましたが、まだ動作しません編集ごとに更新され、簡素化