React ref.current为空
我正在开发一个具有可变时间范围的日程/日历应用程序。要显示当前时间的一行，并显示已完成约会的块，我需要计算给定时间范围内每分钟对应的像素数。
例如:如果议程从早上7点开始，到下午5点结束，总行程是10小时。假设日历的主体有1000个像素。这意味着每小时代表100个像素，每分钟代表1，66个像素。
如果现在是下午3点的话。我们距离议程开始还有480分钟。这意味着显示当前时间的线应该在日历正文顶部的796,8像素(480 * 1,66)。
没有问题的计算，但在获得高度的议程机构。我正在考虑用React来获得高度，但我得到了一个错误：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>
);
}
}回答 4
Stack Overflow用户
发布于 2019-03-19 19:29:43
因此，裁判的问题是，它们不能保证在第一次渲染。您可以确定它们是在componentDidMount期间和之后设置的，因此您有两种前进的方法。
您可以使用回调样式ref并在此基础上设置状态。例如，您可以传入一个对像this.handleRef这样的函数的引用，而不是将您的参考作为支柱传递，它会在其中执行一些逻辑：
handleRef = r => {
this.setState({ bodyHeight: r.clientHeight})
this.calendarBodyRef.current = r;
};或者，您可以保持当前的设置，但必须将clientHeight位移动到生命周期函数，如下所示：
componentDidMount() {
this.setState({ bodyHeight: this.calendarBodyRef.current.clientHeight });
}最终，您不能像这样立即读取ref的当前值，您必须在呈现之后检查它，然后从状态读取bodyHeight。
Stack Overflow用户
发布于 2020-07-14 12:58:01
您可以使用ref回调函数。在这种情况下，您不需要使用“()”。
<tbody ref={this.calendarBodyRef}>
...
calendarBodyRef = (e) => {
console.log(e)
}您将获得DOM元素，因此不需要使用"current“。
Stack Overflow用户
发布于 2021-04-01 15:28:38
如果使用react-redux并将组件包装为connect函数，则需要传递第四个参数，即像这样的forwardRef。
connect(mapStateToProps, mapDispatchToProps, null, {forwardRef: true})我希望这会有所帮助。
https://stackoverflow.com/questions/55248483
复制相似问题
腾讯云开发者
