Javascript 使用珊瑚对话与React和Meteor

我真的很难在我的应用程序中实现评论系统。 我正试图将其实施到一个主要是Meteor和React的项目中。

我认为主要的问题是，这是我第一次需要在React中使用脚本标记。
我曾尝试通过componentDidMount中的dom，使用危险的ethTML和两个不同的包来加载脚本，但检查时只显示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>

---

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

我会在React之外做这件事。所以把它放在

main.html

中。那么，我宁愿，而不是让加载只是

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} />
    );
  }
}

类CoralTalk扩展组件{ 静态divId='coral_talk_stream'； shouldComponentUpdate（）{ return！this.rendered；//停止重新装入div //不应该是必要的，但需要一个小小的预防措施 } renderCoral=div=>{ 如果（！this.rendered&&div！=null）{ window.renderCoralTo（CoralTalk.divId）； } }; render（）{ 返回( ); } } 我不是百分之百的相信这会奏效，但看起来很可能会

如果有时需要只加载脚本标记（如某些页面上的），可以使用类似或的方式有条件地将脚本标记呈现到头部

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>
    );
  }
}

类DynamicScript扩展组件{
render（）{
返回React.createPortal(
,
document.getElementsByTagName（'head'）[0]
);
}
}
类CoralTalk扩展组件{
静态divId='coral_talk_stream'；
shouldComponentUpdate（）{
return！this.rendered；//停止重新装入div
//不应该是必要的，但需要一个小小的预防措施
}
render（）{
this.rendered=true；
返回(
);
}
}

答案摘自另一个论坛，我将其发布在这里，以补充讨论内容，并帮助将来有相同问题的其他人：

您不能像这样从onload事件调用Coral.Talk.render。没有检查要渲染的组件，因此您告诉coral talk渲染到不存在的元素。你很可能有时间问题

你要做的是在你的渲染方法中，像这样在comments div上放置一个ref属性

这就是Gotsdiv可能是的

---

gotCommentsDiv（el）{if（el）Coral.Talk.render（el，{Talk:'}）；}

谢谢Tam河！我尝试了你最初的建议，但没能让它们对我有用。然而，我做到了！我一直在绕圈子，试图让这个渲染正确。非常感谢你！对不起，他们没有为你工作，我很想知道为什么。但我很高兴我的头盔对你有用