React chrome扩展被插入到DOM每次扩展的图标被点击，应该只插入一次

Question

我对react和javascript完全陌生，我的问题是，模态窗口持有我的react应用程序，这是一个chrome扩展，每次我点击扩展图标，都会被注入DOM，导致奇怪的渲染问题。

(div与我的模态窗口在里面，每次添加到DOM时，我点击图标)

结果如下:

模态窗口多次点击图标后注入多次

我想改变它的方式，我的组件只被添加一次到DOM和点击应该只隐藏/显示。

我的项目是基于以下github项目:https://github.com/upmostly/react-chrome-extension

我使用相同的清单。json(你可以在github链接上的公共文件夹中找到)，与项目相同的background.js(也在公共文件夹中)和相同的index.html(在src文件夹中找到)，我只更改了我个人项目的React组件的内容。

我很乐意在这里找到一些帮助。

问好托拜厄斯。

Answer 1

感谢wOxxOm，他给了我一个做这件事的主意。我将content.js中main函数的调用改为:

var not_proceed = false;
var showing = true;
chrome.runtime.onMessage.addListener(function(request, sender, callback) {
if (not_proceed){
var elem = document.getElementById("modal-window")
if(showing){
elem.style.display = "none";
showing = false;}
else {
elem.style.display = "block";
showing = true;
}
}
else {
main();
not_proceed = true
}
});

现在可以正常工作了