反应 ref.current 为空 [英] React ref.current is null

问题描述

我正在开发具有可变时间范围的议程/日历应用.要显示当前时间的一行并显示已进行约会的块，我需要计算给定时间范围内一分钟对应的像素数.

I'm working on an agenda/calendar app with a variable time range. To display a line for the current time and show blocks for appointments that have been made, I need to calculate how many pixels correspond with one minute inside the given time range.

例如:如果议程从早上 7 点开始，到下午 5 点结束，则总时长为 10 小时.假设日历正文的高度为 1000 像素.这意味着每小时代表 100 个像素，每分钟代表 1.66 个像素.

So for example: If the agenda starts at 7 o'clock in the morning and ends at 5 o'clock in the afternoon, the total range is 10 hours. Let's say that the body of the calendar has a height of 1000 pixels. That means that every hour stands for 100 pixels and every minute for 1,66 pixels.

如果当前时间是下午 3 点.我们距离议程开始还有 480 分钟.这意味着显示当前时间的行应位于距日历主体顶部 796,8 像素(480 * 1,66)处.

If the current time is 3 o'clock in the afternoon. We are 480 minutes from the start of the agenda. That means that the line to show the current time should be at 796,8 pixels (480 * 1,66) from the top of the calendar body.

计算没有问题，但获取议程主体的高度.我想使用 React Ref 来获取高度，但出现错误:ref.current is null

No problems with the calculations but with getting the height of the agenda body. I was thinking to use a React Ref to get the height but I'm getting an error: ref.current is null

下面是一些代码:

class Calendar extends Component {
    calendarBodyRef = React.createRef();

    displayCurrentTimeLine = () => {
        const bodyHeight = this.calendarBodyRef.current.clientHeight; // current is null
    }

    render() {
        return (
            <table>
                <thead>{this.displayHeader()}</thead>
                <tbody ref={this.calendarBodyRef}>
                    {this.displayBody()}
                    {this.displayCurrentTimeLine()}
                </tbody>
            </table>
        );
    }
}

推荐答案

所以关于 refs 的事情是它们不能保证在第一次渲染时设置.您可以确定它们是在 componentDidMount 期间和之后设置的，因此您有两种方法可以前进.

So the thing about refs is that they aren't guaranteed to be set on first render. You can be sure they are set during and after componentDidMount so you have two ways going forward.

您可以使用回调样式引用并基于此设置状态.例如.你可以传递一个对像 this.handleRef 这样的函数的引用，而不是传递你的 ref 作为 prop，它会在那里做一些逻辑:

You could use the callback style ref and set state based on that. E.g. instead of passing your ref as the prop, you can pass in a reference to a function like this.handleRef and it would do some logic in there:

  handleRef = r => {
    this.setState({ bodyHeight: r.clientHeight})
    this.calendarBodyRef .current = r;
  };

或者，您可以保留当前设置，但必须将 clientHeight 位移动到生命周期函数中，例如:

Or, you could keep your current set up but you would have to move your clientHeight bit to a lifecycle function like:

  componentDidMount() {
    this.setState({ bodyHeight: this.calendarBodyRef .current.clientHeight });
  }

最终，您不能像那样立即读取 ref 的当前值，您必须在渲染后检查它，然后从状态中读取您的 bodyHeight.

Ultimately, you can't immediately read the current value of a ref like that, you would have to check it after the render and then read your bodyHeight from state.

这篇关于反应 ref.current 为空的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！