javascript - 在 React 和 Meteor 中使用 Coral Talk

Question

我真的很难实现 The Coral Talk Project评论系统到我的应用程序中。我正在尝试将它实现到一个主要是 Meteor 和 React 的项目中。 It's on GitHub

我认为主要问题是这是我第一次需要在 React 中使用脚本标签。
我尝试通过 componentDidMount 中的 dom，通过使用 dangerouslySetHtml，tried using this suggestion 来完成它，以及几个用于加载脚本的不同包，但在检查时仅显示 div 和 src，而不显示页面本身的脚本内容。它的 onload 功能似乎没有触发。

我已通过设置另一个更简单的 Node/Express 应用程序确认服务器和嵌入代码功能正常。
这是我尝试嵌入到我的 React 站点中的代码:

<div id="coral_talk_stream"></div>
<script src="http://127.0.0.1:3000/static/embed.js" async onload="
  Coral.Talk.render(document.getElementById('coral_talk_stream'), {
    talk: 'http://127.0.0.1:3000/'
  });
"></script>

如有任何建议，我们将不胜感激。

Answer 1

我会完全在 React 之外做这件事。所以把它放在你的 main.html 中。然后我会，而不是让 onload 只是

Coral.Talk.render(document.getElementById('coral_talk_stream'), {
  talk: 'http://127.0.0.1:3000/'
});

改成

window.renderCoralTo = function (id) {
  Coral.Talk.render(document.getElementById(id), {
    talk: 'http://127.0.0.1:3000/'
  });
}

然后，在您的组件中，执行此操作:

class CoralTalk extends Component {
  static divId = 'coral_talk_stream';

  shouldComponentUpdate() {
    return !this.rendered; // Stops the div from being remounted
                           // shouldn't be necessary, but a minor precaution
  }

  renderCoral = div => {
    if (!this.rendered && div != null) {
      window.renderCoralTo(CoralTalk.divId);
    }
  };

  render() {
    return (
      <div id={CoralTalk.divId} ref={this.renderCoral} />
    );
  }
}

我不是 100% 这会奏效，但它似乎很可能会奏效。

如果您需要只加载脚本标签有时(如在某些页面上)，您可以使用类似React Helmet 的东西或者只是 Portals有条件地将脚本标签渲染到您的头上。

使用 Portals 的 100% 未经测试的示例:

class DynamicScript extends Component {
  render() {
    return React.createPortal(
      <script {...this.props} />,
      document.getElementsByTagName('head')[0]
    );
  }
}

class CoralTalk extends Component {
  static divId = 'coral_talk_stream';

  shouldComponentUpdate() {
    return !this.rendered; // Stops the div from being remounted
                           // shouldn't be necessary, but a minor precaution
  }

  render() {
    this.rendered = true;
    return (
      <Fragment>
        <ConditionalScript src="http://127.0.0.1:3000/static/embed.js" async onload={`
          Coral.Talk.render(document.getElementById('${CoralTalk.divId}'), {
            talk: 'http://127.0.0.1:3000/'
          });
        `} />
        <div id={CoralTalk.divId} />
      </Fragment>
    );
  }
}