Question

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

我认为主要问题是这是我第一次需要在React中使用脚本标签。
我已经尝试通过componentDidMount中的dom来执行此操作，方法是使用危险地设置Html，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或{{ 3}}，以便有条件地将script标签呈现到您的头上。

使用门户网站的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>
    );
  }
}

Answer 2

我从另一个论坛上获得了答案，我将其张贴在此处以添加讨论，并在以后帮助任何遇到相同问题的人：

您不能像这样通过onload事件调用Coral.Talk.render。没有检查要渲染的组件，因此您是在告诉珊瑚谈话要渲染到不存在的元素。您很可能会遇到计时问题。

您需要做的是在您的render方法中，将ref prop放在这样的注释div上

这可能是gotCommentsDiv ...

gotCommentsDiv（el）{if（el）Coral.Talk.render（el，{talk：'http://127.0.0.1:3000/'}）; }

将Coral Talk与React和Meteor结合使用

2 个答案: