reactjs - 为什么 createRef() 返回当前 : null?

Question

我正在尝试使用 createRef 来访问多个图像的 clientHeight 属性。但是，每次我控制台记录“this.imageRef”时，返回的是 {current:null}。我的 react 是 16.7。我没有看到什么？

此外，PictureForGrid 是我用来渲染并最终将 clientHeight 添加到状态的组件。它由父调用。我将包括两者，但我认为您只需要 PictureForGrid。

有问题的组件 从“ react ”导入 react ；

class PictureForGrid extends React.Component {
constructor(props) {
    super(props);

    this.imageRef = React.createRef();
}


componentDidMount() {
    console.log(this.imageRef.current);
    console.log(this.imageRef);
}


render() {

    return (
        <div>
            <img href={this.imageRef} src={this.props.source} alt= 
{this.props.description} />
        </div>
    )
}
}

export default PictureForGrid;

父组件

import React from 'react';

import PictureForGrid from '../PictureForGrid';
import '../../styles/Parent.css'
import one from '../../pics/one.jpg'
import two from '../../pics/two.jpg'
.
.
. 
.
import fourteen from '../../pics/Alyssa and Ryne/fourteen.jpg'

class Parent extends React.Component {
render() {
    return (
        <div className="picture-grid">
            <PictureForGrid source={one} description="erin working"/>
            <PictureForGrid   source={two} description="hands holding lamp" 
/>
            <PictureForGrid   source={three} description="chapel" />
            <PictureForGrid   source={four} description="dancing couple"/>
            <PictureForGrid   source={five} description="couple holding 
wedding sign"/>
            <PictureForGrid  source={six} description="couple at steeple"/>
            <PictureForGrid  source={seven} description="post wedding"/>
            <PictureForGrid  source={eight} description="groomsmen"/>
            <PictureForGrid  source={nine} description="bridal party"/>
            <PictureForGrid  source={ten} description="shower"/>
            <PictureForGrid  source={eleven} description="flowers"/>
            <PictureForGrid  source={twelve} description="water fountain"/>
            <PictureForGrid  source={thirteen} description="rings"/>
            <PictureForGrid  source={fourteen} description="ceremony"/>
        </div>
    )
}
}

export default Parent;

感谢您的任何建议，因为我显然是新手。

Answer 1

你打错了

改变

<img href={this.imageRef} src={this.props.source} alt= 
{this.props.description} />

到

<img ref={this.imageRef} src={this.props.source} alt= 
{this.props.description} />