0

我正在尝试在我的反应应用程序中使用表情符号。我已经安装了 twemoji npm 包并创建了一个基本组件，如下所示

class TwText extends React.Component {
  render() {
    let toHTML = () => ({
      __html: twemoji.parse(this.props.text)
    });
    return (
      <span className="tw-text" dangerouslySetInnerHTML={toHTML()} />
    );
  }
}
let msg = {text: "hello world \u{1f61a}"}
ReactDOM.render(
  // <TwText text={'hello world \u{1f61a}'}/>, // works
  <TwText text={msg.text}/>,                   // doesn't work for me
  document.getElementById("root")
);
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://twemoji.maxcdn.com/v/latest/twemoji.min.js" crossorigin="anonymous"></script>

但是，如果我尝试如下调用它

  <TwText text={'hello world \u{1f61a}'}/>
  <TwText text={msg.text}/>

第一行实际上呈现了表情符号，但如果同一行“hello world \u{1f61a}”通过变量传递，则它不会按预期呈现。有谁知道为什么？

4

0 回答 0