Question

因此，我有一个使用React构建的可嵌入窗口小部件，其功能类似于Intercom.io，但是我希望窗口小部件可以通过宿主网站中的按钮打开，并通过应用程序中的关闭按钮关闭。

我不知道是否有遵循最佳实践的有效方法。

 <script type="text/javascript">
    const triggerBtn = document.getElementById("btn-trigger");
    // let show = false;
    triggerBtn.addEventListener("click", function () {
      embed.init();
    });
</script>

应用条目

export const init = () => {
  ReactDOM.render(<App />, document.getElementById('app'));
};

App.js

  toggleChat() {
    this.setState({
      visible: !this.state.visible
    });
  }

  render() {
    return (
      <footer>
        {this.state.visible ? (
          <ChatUiContainer
            messages={this.state.messages}
            addAction={this.addAction}
            showForm={this.state.showForm}
            submitForm={this.submitForm}
            loading={this.state.loading}
            submitMessage={this.submitMessage}
            show={config.show}
            toggleChat={this.toggleChat}
          />
        ) : null}
      </footer>
    );
  }

Answer 1

您的方法似乎是解决问题的方法。我有类似的要求，我会列出我的方法。如果您觉得不错，可以采用它。

声明一个javascript类并在其中嵌入一个函数。 MyClass.embedWidget(widgetName,'divToEmbedIn')
此函数称为不同函数，先获取所需数据，然后使用ReactDOM.render(<WidgetName />,divToEmbedIn);填充组件
其余功能留给用户使用。也就是说，他/她必须定义何时必须嵌入组件。 MyClass只会将窗口小部件嵌入所需的位置。

尽管您的方法和我的方法可能看起来相同，但还是有细微的差别。在您的情况下，您只能嵌入一个窗口小部件，因为init逻辑是在应用程序入口点中定义的。（您仍然可以定义不同的ReactDOM.render()函数，但是我想这看起来不太好）但是，如果这是您的要求，那就可以了。

这种方法将稍微为您提供以更可控的方式嵌入不同组件的功能。

希望这可以为您清除一切。

在onClick上切换React嵌入小部件

1 个答案: