reactjs - ReactDOMServer 不渲染到 react-twitter-embed
问题描述
我正在尝试使用ReactDOMServer.renderToString渲染嵌入推文,但它不起作用。我正在使用react-twitter-embed npm 包。
我还尝试了另一个可以工作的 jsx 函数。但是推文嵌入不起作用。我的代码和演示在下面;
不工作。
tweet = x =>
ReactDOMServer.renderToStaticMarkup(
<div>
<TwitterTweetEmbed tweetId={x} />
</div>
);
作品
icon = x => ReactDOMServer.renderToString(<FaTags size={x} />);
完整代码
import React, { Component, Fragment } from "react";
import ReactDOMServer from "react-dom/server";
import { TwitterTweetEmbed } from "react-twitter-embed";
import { FaTags } from "react-icons/fa";
import { render } from "react-dom";
export default class App extends Component {
constructor() {
super();
this.state = {
name: "React"
};
}
tweet = x =>
ReactDOMServer.renderToStaticMarkup(
<div>
<TwitterTweetEmbed tweetId={x} />
</div>
);
icon = x => ReactDOMServer.renderToString(<FaTags size={x} />);
render() {
let tweetxx = "[tweet]1216022644614545409[/tweet]";
let tweetx = tweetxx.replace(/\[tweet\]([0-9]{1,}?(?=\[\/tweet\]))\[\/tweet\]/g,"$1");
return (
<Fragment>
<span>Doesn't work</span>
<div dangerouslySetInnerHTML={{ __html: this.tweet(tweetx) }} />
<hr />
<span>Works</span>
<div dangerouslySetInnerHTML={{ __html: this.icon(40) }} />
<hr />
<span>Works (Directly)</span>
<br />
<span>{tweetxx}</span>
<br />
<span>{tweetx}</span>
<TwitterTweetEmbed tweetId={tweetx} />
</Fragment>
);
}
}
render(<App />, document.getElementById("root"));
解决方案
推荐阅读
- android - 使用非默认 FirebaseApp 初始化 FirebaseMessage 和 FirebaseAnalytics
- git - 解决 Tableau 工作簿 TWB 文件中的 GIT 合并冲突
- regex - Symfony4 在使用带有 slug 生成的函数请求 actor_show 时出现消息错误
- python-pptx - How to alter a presentation to display all texts in upper case?
- java - 在服务器-客户端套接字通信方面需要一些帮助
- python-3.x - 从 csv 文件中提取特定列,并使用 Python 转换为 Lambda 中的字符串
- python - 在 python 中使用 Seaborn 进行配对分布
- android - 如何获得半透明状态栏?
- java - 如何使用 Spring Data Mongo DB 仅检索文档的特定字段?
- java - 循环构造函数对象循环java