3

我正在尝试使用ReactDOMServer.renderToString渲染嵌入推文，但它不起作用。我正在使用react-twitter-embed npm 包。

我还尝试了另一个可以工作的 jsx 函数。但是推文嵌入不起作用。我的代码和演示在下面；

Codesandbox 演示

不工作。

  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"));
4

0 回答 0