为什么我的 React 组件只在 ctrl + shift + R 之后渲染？答案

【问题标题】：Why does my React component only render after ctrl + shift + R?为什么我的 React 组件只在 ctrl + shift + R 之后渲染？
【发布时间】：2023-02-01 00:01:16
【问题描述】：

我有一个 chrome 扩展，它只在使用 ctrl + shift + r 刷新页面后显示，但现在我遇到一个问题，每当我点击一个最终刷新页面的链接时，扩展就会消失，我必须再次硬刷新。

我尝试使用 window.location.reload() 但有时它会不停地重新加载页面。这是要呈现的代码：

class IconExtChrome extends React.Component<IProps, IState> {

    constructor(props) {
        super(props);
        this.state = { _isLoggedIn: false };
        this.login = this.login.bind(this);
        this.logout = this.logout.bind(this);
        this.popover = this.popover.bind(this);
        this.setAuthState = this.setAuthState.bind(this);
        this.setAuthState();
    }

    render() {
        return (
            <div className="bootsrtap-iso">
                <OverlayTrigger trigger="click" rootClose placement="bottom" overlay={this.popover()}>
                    <img src={chrome.runtime.getURL('favicon.png')} width="40" height="auto" />
                </OverlayTrigger>
            </div>
        )
    }


    popover(): OverlayChildren {
        return (
            <Popover className="bootstrap-iso">
                <Popover.Body className="p-2 d-grid text-center">
                    <PopoverHeader as="h4">{(this.state._isLoggedIn ? 'You are currenlty logged in' : 'You are currenlty logged out')}</PopoverHeader>
                    <Button className="m-auto mt-2" variant={this.state._isLoggedIn ? 'danger' : 'primary'} size="sm" onClick={this.state._isLoggedIn ? this.logout : this.login}>{this.state._isLoggedIn ? 'Logout' : 'Login'}</Button >
                </Popover.Body>
            </Popover>
        );
    }

    login() { Login(() => { this.setAuthState() }, () => { console.log("failed to login") }) }
    logout() { Logout(() => { this.setAuthState() }); }
    setAuthState() { IsLoggedIn((isLoggedIn: boolean) => { this.setState({ _isLoggedIn: isLoggedIn }); }); }
    refreshToken: () => { RefreshToken(); }
}

const GmailFactory = require("gmail-js");
const gmail = new GmailFactory.Gmail() as Gmail;

var btn = gmail.tools.add_toolbar_button('<div id="icon_placeholder"></div>', function () { }, 'temp_css').get(0)['className'];

const getElement = document.querySelectorAll('.' + btn.toString().replace(' ', '.'))[5]
var app: HTMLElement = document.createElement('div') as HTMLElement;
var pos: HTMLElement = getElement as HTMLElement;
if (pos !== null) {
    console.log('pos: ' + pos)
    pos.appendChild(app);
    ReactDOM.render(<IconExtChrome />, app);
}

我可以通过任何方式轻松地硬刷新页面或仅在没有缓存的情况下刷新后才显示的适当修复程序？

【问题讨论】：

我们不会在此处将问题标记为“已解决”。请拍tour。
请不要在您的问题标题或正文中添加“已解决”。请参阅what should I do when someone answers，了解如何证明您已解决问题。 Answering your own question is allowed and even encouraged。
著名的！我认为这可以帮助某人了解正在解决或未解决的问题，但我想他们可以查找已接受的答案

标签： javascript reactjs google-chrome-extension render chrome-extension-manifest-v3

【解决方案1】：

我通过添加一个事件侦听器来检查页面是否已完全加载，解决了正常 (F5) 刷新后不呈现的问题。例子：

window.addEventListener('load', function () {
    const app: HTMLElement = document.createElement('div') as HTMLElement;
    const pos: HTMLElement = document.evaluate('/html/body/div[7]/div[3]/div/div[1]/div[3]/header/div[2]/div[2]', document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue as HTMLElement;

    pos.appendChild(app);
    ReactDOM.render(<IconExtChrome />, app);
}, false);

【讨论】：