如何在 React 中结合 emojione 和 markdown？

Question

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

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

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

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

Answer 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 class 属性来调整表情符号的显示方式（而不是将选项对象传递给 react-emojify 函数） .

如何在 React 中结合 emojione 和 markdown？

How to combine emojione with markdown in React?

javascript

markdown

reactjs

emojione