javascript - onLoad 事件仅在加载实际图像时触发

Question

我正在做一个涉及获取组件高度的 React 项目。一个组件包含一个徽标，我想获取整个事物的宽度，包括加载的图像。componentDidMount()在这种情况下不起作用，因为它在图像加载之前触发。我onLoad在标签中使用了事件，<img>但 React 返回替代文本的高度，而不是实际图像。我发布了以下代码供参考：

class ElHeader extends Component {
    constructor(props) {
        super(props);       
        this.state = {
            dropdownTopPos: 0,
            navPad: 0,
            boxShadow: false,
        }
    }
    updateState = () => {
        let headerHeight = this.refHeader.clientHeight,
                navUlHeight = this.refNavUl.clientHeight;
        this.setState({
            headerHeight: headerHeight,
            dropdownTopPos: (headerHeight + navUlHeight)/2,
            navPad: (headerHeight - navUlHeight)/2,
        });
    };
    setBoxShadow = () => {
        this.setState({
            boxShadow: document.documentElement.scrollTop === 0 ? false : true,
        });
    };
    componentDidMount = () => {
        window.addEventListener('resize', this.updateState, false);
        document.addEventListener('scroll', this.setBoxShadow, false);
    };
    componentWillUnmount = () => {
        window.removeEventListener('resize', this.updateState, false);
        document.removeEventListener('scroll', this.setBoxShadow, false);
    };
    render = () => {
        return (
            <div style={{height: this.state.headerHeight - 1}}>
                <Header innerRef={x =>  this.refHeader = x} boxShadow={this.state.boxShadow}>
                        <Container>
                            <Grid>
                                <Row>
                                    <Col>
                                        <div><h1><a href="/"><Logo onLoad={this.updateState} src={mLogo} alt="CKY-UK Logo" /></a></h1></div>
                                    </Col>
                                    <Col stretchWidth>
                                        <Grid>
                                            <Row alignEnd="sm" alignMiddle="sm" stretchHeight>
                                            <ul ref={x => this.refNavUl = x}>
                                                <NavUlDesktop>
                                                    <NavLi><NavItem href='/'>Home</NavItem></NavLi>
                                                    <ElDropdown topPos={this.state.dropdownTopPos} itemContent="About us" listContent={[{key: 1, name: 'Leadership Team', link: '#leadership-team'}, {key: 2, name: 'Star players', link: '#star-players'}]} />
                                                    <NavLi><NavItem href='#apply'>Apply</NavItem></NavLi>
                                                    <NavLi><NavItem href='#news'>News</NavItem></NavLi>
                                                    <NavLi><NavItem href="#login"><FontAwesomeIcon icon="sign-in-alt" fixedWidth /> Login</NavItem></NavLi>
                                                </NavUlDesktop>
                                                <ElNavMobile navPad={this.state.navPad} />
                                            </ul>
                                            </Row>
                                        </Grid>
                                    </Col>
                                </Row>
                            </Grid>
                        </Container>
                </Header>
            </div>
        )
    };
}

我该如何解决这个问题？

标签： javascriptreactjsonload