如何在 React 中将 emojione 与 markdown 结合使用？答案

【问题标题】：How to combine emojione with markdown in React?如何在 React 中将 emojione 与 markdown 结合使用？
【发布时间】：2016-09-18 13:38:35
【问题描述】：

现在我正在尝试使用react-emojify 和react-markdown 解析一些文本。我想以某种方式结合这两个实用程序的功能。

问题是（如果我理解正确的话）两者都将字符串转换为 React DOM。当我在content 上运行emojify 时，结果无法传递给<ReactMarkdown source={result} />，反之亦然。

我正在考虑做一些事情，比如将 React DOM 序列化为 HTML 并允许在另一个解析器中使用一些标签，但是在使它们兼容时，两者都有相当有限的选择（例如，emojify 将表情符号吐出为跨度，这在 ReactMarkdown 中是不允许的)。

有其他人尝试过吗？有什么方法（甚至通过更改库）可以帮助我实现这一目标吗？

【问题讨论】：

标签： javascript reactjs markdown emojione

【解决方案1】：

我设法通过将react-emojify 替换为emojione 来使事情顺利进行：

import emojione from 'emojione';
import React from 'react';
import ReactMarkdown from 'react-markdown';

class ExampleComponent extends React.Component {
  render() {
    const content = this.props.content;
    const emojified = emojione.shortnameToImage(content);
    return (
      <ReactMarkdown source={emojified} />
    );
  }
}

后来我只需要通过更改 CSS 中的 .emojione 类属性来调整表情符号的显示方式（而不是将选项对象传递给 react-emojify 函数）。

【讨论】：