React Emoji Picker不转换为unicode

Question

我引用了这个

https://github.com/ealush/emoji-picker-react

我在渲染实际的表情符号时遇到了问题，而且没有这样做。当你点击它时，它应该加载到表情符号png中，但不是。

也看着这个

https://github.com/atatarinov/react-emoji/blob/master/app/components/ChatWindow.js

工作演示

https://codesandbox.io/s/qqmvo5924?fontsize=14

App.js

import React, { Component } from 'react';
import Navbar from './components/Navbar';
import { withStyles } from '@material-ui/core/styles';
import Paper from '@material-ui/core/Paper';
import Grid from '@material-ui/core/Grid';
import logo from './logo.svg';
import { Typography } from '@material-ui/core';
import Footer from './components/Footer';
import Emoji from './components/Emoji';
import TextField from '@material-ui/core/TextField';
import EmojiPicker from 'emoji-picker-react';
import JSEMOJI from 'emoji-js';


let jsemoji = new JSEMOJI();

// set the style to emojione (default - apple)
jsemoji.img_set = 'emojione';
// set the storage location for all emojis
jsemoji.img_sets.emojione.path = 'https://cdn.jsdelivr.net/emojione/assets/3.0/png/32/';

// some more settings...
jsemoji.supports_css = false;
jsemoji.allow_native = false;
jsemoji.replace_mode = 'unified'



const styles = theme => ({
 shadows: ["none"],
 spacing: 8,
  root: {
    flexGrow: 1,
  },
  paper: {
    padding: theme.spacing.unit * 2,
    textAlign: 'left',
    width: '500px',
    color: theme.palette.text.secondary,

  },
  myitem:{
    margin:'40px'
  },
  emoji:{
    margin:'40px'
  }
});






class App extends Component {

  constructor(props){
    super(props);
    this.state = {
      emoji: '',
      text:''

    }
  }

  onChange = (e) => {
    e.preventDefault()
    this.setState({
     text: e.target.value
    });
  }

  handleClick = (n, e) => {
    let emoji = jsemoji.replace_colons(`:${e.name}:`);
    this.setState({
      text: this.state.text + emoji
    });
    console.log(emoji)
  }

  render() {
    const { classes } = this.props;
    return (
        <div className={classes.root}>
          <Navbar />
          <Grid container spacing={12}>
            <Grid item sm={6} className={classes.myitem}  >
              <Paper className={classes.paper} >
                <Typography variant="h2" component="h2">
                    Insert An Emoji
                </Typography>
                <TextField
                        id="standard-name"
                        label="Emoji"
                        className={classes.textField}
                        value={this.state.text}
                        onChange={this.onChange}
                        margin="normal"
                    />


                <EmojiPicker onEmojiClick={this.handleClick}/>
              </Paper>

            </Grid>

          </Grid>
          {/* insert footer here */}

          <Footer/>
        </div>
    );
  }
}

export default withStyles(styles)(App);

Answer 1

发生这种情况的原因是因为您使用的表情符号转换器已配置为输出img标签。您必须将其配置为输出unicode。您需要翻转allow_native配置才能实现（您的当前设置为false）：

jsemoji.allow_native = true;

有关更多信息，请参阅docs。