Как включить окно пользовательского поиска Google в компоненте React

Question

Я хотел бы добавить окно пользовательского поиска Google на моем сайте, которое создается с помощью ReactJS. Таким образом, пользователь может искать контент как внутри сайта, так и в Интернете.

Google сгенерированный код будет что-то вроде:

<script> 
    (function() { 
    var cx = '013626029679071:ze3ta4'; 
    var gcse = document.createElement('script'); 
    gcse.type = 'text/javascript'; 
    gcse.async = true; 
    gcse.src = 'https://cse.google.com/cse.js?cx=' + cx; 
    var s = document.getElementsByTagName('script')[0]; 
    s.parentNode.insertBefore(gcse, s); 
    })(); 
</script> 
<gcse:search></gcse:search> 

Есть ли способ, чтобы добавить это в React компонент? Он продолжает говорить SyntaxError. Я попытался создать компонент для вышеуказанного кода и использовать его в компоненте React, но ничего не отображается. Это правильный способ добавить поисковую панель на сайт React? Любые намеки?

Спасибо!

Answer 1

Я думаю, что у меня есть решение для вас, не используя riskouslySetInnerHTML. Поместите свой код в блоке componentDidMount и присоединять к элементу с JQuery, как так:

componentDidMount(){ 
const embedcode = `<script> 
     (function() { 
     var cx = '013626029654558379071:ze3tw4csia4'; 
     var gcse = document.createElement('script'); 
     gcse.type = 'text/javascript'; 
     gcse.async = true; 
     gcse.src = 'https://cse.google.com/cse.js?cx=' + cx; 
     var s = document.getElementsByTagName('script')[0]; 
     s.parentNode.insertBefore(gcse, s); 
     })(); 
    </script> 
    <gcse:search></gcse:search>` 

    $('#gsearch').html(embedcode) 
    } 

И ваш DOM элемент:

<div id='gsearch'> 
</div> 

Тем не менее некоторые отладки для укладки материала, но это работает!

Бест, Патрик