在componentDidMount-React

Question

我想在页面加载时在按钮节点旁边附加一个信息图标div。 我正在尝试在componentDidMount中执行此操作，但是直到那个时候按钮节点才可用。

我正在尝试使用setTimeout，但是它取决于表中的数据，有时它可以使用3000毫秒工作，但是有时如果数据更多，它就不会出现。

是否有更好/确定的附加信息节点的方法。

该按钮节点来自我正在使用的外部库，因此我没有在render / return方法中创建该节点，因此无法添加该时间。

    componentDidMount() {

        window.setTimeout(() => {
            const actionSectionnode = document.querySelector('#main-content .action-section');
            const template = `<div style="padding-top: 10px">
            <i class="icon-info-tip-filled"
                    title="abcdefghijk......"
                ></i>
            </dnx-tooltip>`;
            if ($(actionSectionnode).length > 0) {
                actionSectionnode.insertAdjacentHTML('afterend', template);
            }
        }, 3000);
    }

还有一件事情-当我使用查询选择器时，按钮节点会出现，但在使用document.getElementsByClassName时不会出现。由于queryselector很危险-我还能使用什么。

Answer 1

您不应该使用纯JavaScript，您可以做的是Conditional Rendering

您应该有一个状态，指示是否应渲染div

state = {
    ...
    isDivShowing = false;
}

在componentDidMount中，将状态设置为true

componentDidMount(){
    ...
    this.setState({isDivShowing: true})
    ...
}

在渲染中，您需要在渲染之前进行检查

render() {
    return(
        ...
        {   // conditional rendering 
            this.state.isDivShowing && ( 
                <div>...</div>
            )
        }
    )
}