Question

我正在从API中提取JSON数据。 JSON包含来自社交媒体网站Steemit.com的博客文章。这些帖子在标记中，我想从API中获取标记，将其转换为常规HTML，并在React组件中显示。

这是我的渲染功能。 API数据在componentDidMount中被调用，由深层嵌套的对象组成。不好意思。

render() {
    const posts = Object.keys(this.state.myPosts);

    let page = posts.map((post, i) => {
      return (
        this.state.myPosts[posts[i]]["category"] === "utopian-io"
        ?
          <div className="content-container">
            <p>
              <strong>Author: {this.state.myPosts[posts[i]]["author"]}</strong>
            </p>
            <p>
              <strong>Title: {this.state.myPosts[posts[i]]["title"]}</strong>
            </p>
            <p>
              <strong>Payout: {this.state.myPosts[posts[i]]["total_payout_value"]}</strong>
            </p>
            <p>{this.state.myPosts[posts[i]]["created"]}</p>
            <p><span>Category: </span>{this.state.myPosts[posts[i]]["category"]}</p>

            // Successfully renders the markup, but I want to convert this to HTML so it displays as HTML
            <p>{this.state.myPosts[posts[i]]["body"]}</p>

            // I have tried the following but I get a "not a string" console.error or the browser just crashes
            <Markdown>{this.state.myPosts[posts[i]]["body"]}</Markdown>



          </div>
        :
        null

      );
    });

    return (
        <div>
          {page}
        </div>
    );
  }
}

已成功导入Markdown-to-JSX包，并使用<Markdown></Markdown>标签对其进行调用是使用它的适当方法。问题在于它需要一个字符串，而当我将其传递给this.state.myPosts[posts[i]]["body"]时，它将无法正常工作。我尝试使用toString(）和JSON.stringify()将数据转换为字符串，但无法弄清楚。

如何将JSON标记数据从API作为字符串传递给Markdown-to-JSX？

按顺序来说，我认为将this.state.myPosts[posts[i]]["body"]转换为字符串应该可以解决此问题，但是我不知道该怎么做。

Answer 1

选项1：危险地设置InnerHTML

如果您想将HTML插入帖子的正文中，请危险地使用SetInnerHTML

render: function() {
    return (
        <div dangerouslySetInnerHTML={{__html: this.state.myPosts[posts[i]]["body"]}></div>
    );
}

您需要使用危险地设置内部HTML，因为React会对HTML进行转义以防止XSS（一种安全的东西，可以避免注入恶意代码）

如果将帖子正文直接转换为字符串，则将在正文中添加很多html标签作为字符串，也不推荐。
如果您解析标记并想将其转换，则将是一项繁重的任务。
通常，这种做法是API调用不会返回格式化的标记。

选项2：npm-library

https://www.npmjs.com/package/html-to-react

您不应该放松React的魔力。因此，这可能是将您的帖子模式转换为React'Post Body'组件的一个不错的选择。

您的结果应该包含所有内部组件。这样，您就可以保留React的优势

使用Markdown-to-JSX包在React组件的render函数中将标记转换为HTML

1 个答案: