Javascript 如何在react应用程序中获取我的google自定义搜索输入

我正在React应用程序中使用Google自定义搜索：

我想将默认占位符“自定义搜索”改为其他内容。似乎没有一种方法可以用CSS实现这一点，所以我尝试用Javascript实现它。我在componentDidMount（）钩子中有这个：

它将null输出到控制台，这意味着它没有从DOM中获取任何内容

我不确定Google custom search是如何将搜索栏注入页面的，但它似乎是异步的。因此，我不能指望componentDidMount（）启动时它就准备好了。但据我所知，componentDidMount是页面加载时触发的最后一个钩子

所以我的问题是：我如何知道Google自定义搜索何时准备就绪（即在DOM中可用）？有没有什么钩子可以用来抓它

谢谢

以下是完整的组件：

import React, { Component } from 'react';
import '../../App.scss';
import './ContactMethod.scss';
// eslint-disable-next-line
import callUsIcon from '../../assets/images/call-us-icon.png';

class ContactMethod extends Component {

componentDidMount() {
    if (this.props.methodType === 'search') {
        const searchInput = document.querySelector('#gsc-i-id1');
        console.log('componentDidUpdate: ', searchInput);
    }
}

render() {
    // Figure out which contact method this is:
    let methodTypeName = '';
    let methodTypeValue = '';
    let icon = '';
    switch (this.props.methodType) {
        case 'phone':
            methodTypeName = 'Call Us';
            methodTypeValue = '403-999-4951';
            icon = require('../../assets/images/call-us-icon.png');
            break;
        case 'email':
            methodTypeName = 'Email Us';
            methodTypeValue = 'support@assertivesolutions.ca';
            icon = require('../../assets/images/email-us-icon.png');
            break;
        case 'search':
            methodTypeName = 'Search';
            methodTypeValue = 'Enter search here...';
            icon = require('../../assets/images/search-icon.png');
            break;
        // need default case
    }

    // If this is search, we want an input field:
    var valueElement = <span className="contact-method-value">{ methodTypeValue }</span>;
    if (this.props.methodType === 'search') {
        valueElement = <div className="gcse-search" /> // <-- here
    }

    // Return the component:
    return (
        <div className="contact-method flex-row-space-between">
            <div className="flex-column-center">
                <img src={ icon } alt="{ icon }" />
            </div>
            <div className="name-and-value flex-column-space-around">
                <span className="contact-method-name">{ methodTypeName }</span>
                { valueElement } // <-- and here
            </div>
        </div>
    );
}
}

export default ContactMethod;

import React，{Component}来自'React'；
导入“../App.scss”；
导入“/ContactMethod.scss”；
//eslint禁用下一行
从“../../assets/images/call us icon.png”导入callUsIcon；
类方法扩展组件{
componentDidMount（）{
if（this.props.methodType==='search'）{
const searchInput=document.querySelector（'gsc-i-id1'）；
log（'componentDidUpdate:'，searchInput）；
}
}
render（）{
//找出这是哪种联系方式：
让methodTypeName=''；
让methodTypeValue=''；
让icon=''；
开关（this.props.methodType）{
“电话”案例：
methodTypeName=‘呼叫我们’；
methodTypeValue='403-999-4951'；
icon=require（'../../assets/images/call-us-icon.png'）；
打破
“电子邮件”案例：
methodTypeName='给我们发电子邮件'；
methodTypeValue=support@assertivesolutions.ca';
icon=require（'../../assets/images/email-us-icon.png'）；
打破
“搜索”案例：
methodTypeName='搜索'；
methodTypeValue='在此处输入搜索…'；
icon=require（'../../assets/images/search icon.png'）；
打破
//需要默认情况
}
//如果这是搜索，我们需要一个输入字段：
var valueElement={methodTypeValue}；
if（this.props.methodType==='search'）{
valueElement=//你能告诉我们你是如何在你的应用程序中实现它的吗？我用更多的代码编辑了我的帖子。我用//标记了兴趣点。你能告诉我们你是如何在你的应用程序中实现它的吗？我用更多的代码编辑了我的帖子。我用//标记了兴趣点//
import React, { Component } from 'react';
import '../../App.scss';
import './ContactMethod.scss';
// eslint-disable-next-line
import callUsIcon from '../../assets/images/call-us-icon.png';

class ContactMethod extends Component {

componentDidMount() {
    if (this.props.methodType === 'search') {
        const searchInput = document.querySelector('#gsc-i-id1');
        console.log('componentDidUpdate: ', searchInput);
    }
}

render() {
    // Figure out which contact method this is:
    let methodTypeName = '';
    let methodTypeValue = '';
    let icon = '';
    switch (this.props.methodType) {
        case 'phone':
            methodTypeName = 'Call Us';
            methodTypeValue = '403-999-4951';
            icon = require('../../assets/images/call-us-icon.png');
            break;
        case 'email':
            methodTypeName = 'Email Us';
            methodTypeValue = 'support@assertivesolutions.ca';
            icon = require('../../assets/images/email-us-icon.png');
            break;
        case 'search':
            methodTypeName = 'Search';
            methodTypeValue = 'Enter search here...';
            icon = require('../../assets/images/search-icon.png');
            break;
        // need default case
    }

    // If this is search, we want an input field:
    var valueElement = <span className="contact-method-value">{ methodTypeValue }</span>;
    if (this.props.methodType === 'search') {
        valueElement = <div className="gcse-search" /> // <-- here
    }

    // Return the component:
    return (
        <div className="contact-method flex-row-space-between">
            <div className="flex-column-center">
                <img src={ icon } alt="{ icon }" />
            </div>
            <div className="name-and-value flex-column-space-around">
                <span className="contact-method-name">{ methodTypeName }</span>
                { valueElement } // <-- and here
            </div>
        </div>
    );
}
}

export default ContactMethod;