Question

我想在触发点击事件时从Javascript文件加载React组件。所以基本上，

function checkScript()
{
    var tab_content = document.getElementById('tab-content');
    var a = '<div id="notifications" class="tab-pane fade">'+
                '<h2 class="notify">Notify</h2>'+
                '<div id="NotifyComponent">'+
                  'Waiting to load notify'+
                '</div>'+
              '</div>';
    tab_content.innerHTML = tab_content.innerHTML + a;
    loadScript('/components/notifications.js', null);
}
$('#ap').click(function(e)
{
   checkScript(); 
});

这是我的index.js文件中的一段代码，我用它来加载React文件，但文件没有被渲染。

但是，如果我使用以下代码，渲染就可以了。

function checkScript()
{
    var tab_content = document.getElementById('tab-content');
    var a = '<div id="notifications" class="tab-pane fade">'+
                '<h2 class="notify">Notify</h2>'+
                '<div id="NotifyComponent">'+
                  'Waiting to load notify'+
                '</div>'+
              '</div>';
    tab_content.innerHTML = tab_content.innerHTML + a;
    loadScript('/components/notifications.js', null);
}
checkScript();

这个脚本加载react组件就好了，唯一的区别是它在加载Javascript文件时直接调用，而不是在触发事件时调用。

那么，我在click事件中加载react组件会做出哪些更改。!!

Answer 1

您可能希望将其打包在document.ready

中

$(document).ready(function() {
  $('#ap').click(function() {
     checkScript(); 
   });
});

使用Javascript动态加载React组件

1 个答案: