在ReactJS中使用Google自定义搜索引擎

我在ReactJS中使用GCSE（谷歌自定义搜索引擎）时遇到问题。我的代码如下所示：

class Input extends React.Component {

  conponentDidMount() {
    var myCallback = function() {
       if (document.readyState == 'complete') {
          google.search.cse.element.render(
          {
            div: "root",
            tag: 'search'
         });
       } else {
           google.setOnLoadCallback(function() {
              google.search.cse.element.render(
              {
                div: "root",
                tag: 'search'
              });
           }, true);
   }
};

window.__gcse = {
  parsetags: 'explicit',
  callback: myCallback
};

  (function() {
    var cx = '008391824253360889328:j5posmpyok0';
    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);
  })();
    console.log(window.__gcse);
}

  render() {
    return(
      <div className = "content">
        <div className="gcse-searchbox" data-resultsUrl="http://www.google.com" data-newWindow="true" data-queryParameterName="search" >
        </div>
      </div>
    );
  }
}

ReactDOM.render(
  <Input/>,
  document.getElementById('root')
)

类输入扩展了React.Component{
conponentDidMount（）{
var myCallback=函数（）{
如果（document.readyState=='complete'）{
google.search.cse.element.render(
{
分区：“根”，
标签：“搜索”
});
}否则{
setOnLoadCallback（函数（）{
google.search.cse.element.render(
{
分区：“根”，
标签：“搜索”
});
}，对）；
}
};
窗口。\uuu gcse={
parsetags:'显式'，
回调：myCallback
};
（功能（）{
var cx='008391824253360889328:j5posmpyok0'；
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）；
})();
控制台日志（窗口）；
}
render（）{
返回(
);
}
}
ReactDOM.render(
,
document.getElementById（'root'））
)

它没有显示搜索栏。我不知道如何在React中更改这样的代码。我已经读了他的文件。但我还是不明白

---

谢谢。

您在控制台中遇到了什么错误？顺便说一句您在

conponentDidMount

上有一个输入错误，应该是

componentDidMount

哇，这个输入错误造成了问题。它可以成功地工作。谢谢你提醒我。很高兴它对你有用。