blocks|key|2786202|text|因此，裁判的问题是，它们不能保证在第一次渲染。您可以确定它们是在componentDidMount期间和之后设置的，因此您有两种前进的方法。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2786203|您可以使用回调样式ref并在此基础上设置状态。例如，您可以传入一个对像this.handleRef这样的函数的引用，而不是将您的参考作为支柱传递，它会在其中执行一些逻辑：|2786204|++handleRef+=+r+=>+{
++++this.setState({+bodyHeight:+r.clientHeight})
++++this.calendarBodyRef.current+=+r;
++};|code-block|syntax|javascript|2786205|或者，您可以保持当前的设置，但必须将clientHeight位移动到生命周期函数，如下所示：|2786206|++componentDidMount()+{
++++this.setState({+bodyHeight:+this.calendarBodyRef.current.clientHeight+});
++}|2786207|最终，您不能像这样立即读取ref的当前值，您必须在呈现之后检查它，然后从状态读取bodyHeight。|2786208|entityMap^0|W|H|0|Z|E|0|0|I|C|0|0|14|A|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|X|8|@$9|Y|A|Z|B|C]]|D|@]|E|$]]|$1|H|3|I|5|J|7|10|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|11|8|@$9|12|A|13|B|C]]|D|@]|E|$]]|$1|O|3|P|5|J|7|14|8|@]|D|@]|E|$K|L]]|$1|Q|3|R|5|6|7|15|8|@$9|16|A|17|B|C]]|D|@]|E|$]]|$1|S|3|-4|5|6|7|18|8|@]|D|@]|E|$]]]|T|$]]

<p>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 <code>componentDidMount</code> so you have two ways going forward.</p>
<p>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 <code>this.handleRef</code> and it would do some logic in there:</p>
<pre><code>  handleRef = r =&gt; {
    this.setState({ bodyHeight: r.clientHeight})
    this.calendarBodyRef.current = r;
  };
</code></pre>
<p>Or, you could keep your current set up but you would have to move your <code>clientHeight</code> bit to a lifecycle function like:</p>
<pre><code>  componentDidMount() {
    this.setState({ bodyHeight: this.calendarBodyRef.current.clientHeight });
  }
</code></pre>
<p>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 <code>bodyHeight</code> from state.</p>


blocks|key|387859|text|如果希望避免将计算出来的身高存储在组件状态，那么另一种方法是引入第二个ref+(即elementDisplayHeightRef)，如下所示：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|387860|class+Calendar+extends+React.Component+{

++++/*+Create+a+ref+for+the+body+*/
++++calendarBodyRef+=+React.createRef();

++++/*+Create+a+ref+for+element+where+height+will+be+displayed+*/
++++elementDisplayHeightRef+=+React.createRef();

++++displayCurrentTimeLine+=+()+=>+{

++++++++/*+Calculate+body+height+from+ref+*/
++++++++const+bodyHeight+=+this.calendarBodyRef.current.clientHeight;++++

++++++++/*+Update+display+*/
++++++++this.elementDisplayHeightRef.current.innerText+=+`bodyHeight:${bodyHeight}`
++++}

++++render()+{
++++++++return+(
++++++++++++<table>
++++++++++++++++<thead></thead>
++++++++++++++++<tbody+ref={this.calendarBodyRef}>
++++++++++++++++++++<td><td>Some+row</td></td>
++++++++++++++++++++{/*+Bind+display+ref+*/+}
++++++++++++++++++++<tr><td+ref={this.elementDisplayHeightRef}></td></tr>
++++++++++++++++</tbody>
++++++++++++</table>
++++++++);
++++}

++++/*+Add+did+mount+life+cycle+hook,+and+trigger+display+of+body+height+*/
++++componentDidMount()+{

++++++this.displayCurrentTimeLine()
++++}
}|code-block|syntax|javascript|387861|这种方法在displayCurrentTimeLine()生命周期钩子(它本身在第一个render()之后调用)期间调用，以确保在组件逻辑在displayCurrentTimeLine()中与它们进行交互之前，两个refs都被完全初始化。|387862|希望这能帮上忙！|387863|entityMap^0|Z|3|15|N|0|0|5|O|17|8|1Y|O|2Z|4|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]|$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|V|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|W|8|@$9|X|A|Y|B|C]|$9|Z|A|10|B|C]|$9|11|A|12|B|C]|$9|13|A|14|B|C]]|D|@]|E|$]]|$1|M|3|N|5|6|7|15|8|@]|D|@]|E|$]]|$1|O|3|-4|5|6|7|16|8|@]|D|@]|E|$]]]|P|$]]

<p>If avoiding storage of the calculated body height in component state is preferred, then another approach would be to introduce an second <code>ref</code> (ie <code>elementDisplayHeightRef</code>) like so:</p>

<pre><code>class Calendar extends React.Component {

    /* Create a ref for the body */
    calendarBodyRef = React.createRef();

    /* Create a ref for element where height will be displayed */
    elementDisplayHeightRef = React.createRef();

    displayCurrentTimeLine = () =&gt; {

        /* Calculate body height from ref */
        const bodyHeight = this.calendarBodyRef.current.clientHeight;    

        /* Update display */
        this.elementDisplayHeightRef.current.innerText = `bodyHeight:${bodyHeight}`
    }

    render() {
        return (
            &lt;table&gt;
                &lt;thead&gt;&lt;/thead&gt;
                &lt;tbody ref={this.calendarBodyRef}&gt;
                    &lt;td&gt;&lt;td&gt;Some row&lt;/td&gt;&lt;/td&gt;
                    {/* Bind display ref */ }
                    &lt;tr&gt;&lt;td ref={this.elementDisplayHeightRef}&gt;&lt;/td&gt;&lt;/tr&gt;
                &lt;/tbody&gt;
            &lt;/table&gt;
        );
    }

    /* Add did mount life cycle hook, and trigger display of body height */
    componentDidMount() {

      this.displayCurrentTimeLine()
    }
}
</code></pre>

<p>This approach calls <code>displayCurrentTimeLine()</code> during the <code>componentDidMount()</code> life cycle hook (which itself is called after the first <code>render()</code>) to ensure that both <code>refs</code> are fully initialised, before the component logic interacts with them in <code>displayCurrentTimeLine()</code>. </p>

<p>Hope that helps!</p>


blocks|key|2786267|text|您可以使用ref回调函数。在这种情况下，您不需要使用“()”。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2786268|<tbody+ref={this.calendarBodyRef}>
...
calendarBodyRef+=+(e)+=>+{
console.log(e)
}|code-block|syntax|javascript|2786269|您将获得DOM元素，因此不需要使用"current“。|2786270|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>You could use a ref callback function. In this case, you wouldn't need to use &quot;React-createRef()&quot;.</p>
<pre><code>&lt;tbody ref={this.calendarBodyRef}&gt;
...
calendarBodyRef = (e) =&gt; {
console.log(e)
}
</code></pre>
<p>You will get the DOM Element back and therefore don't need to use &quot;current&quot;.</p>


blocks|key|1596930|text|如果使用react-redux并将组件包装为connect函数，则需要传递第四个参数，即像这样的forwardRef。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1596931|connect(mapStateToProps,+mapDispatchToProps,+null,+{forwardRef:+true})|code-block|syntax|javascript|1596932|我希望这会有所帮助。|1596933|entityMap^0|4|B|M|7|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]|$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|T|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|U|8|@]|D|@]|E|$]]|$1|M|3|-4|5|6|7|V|8|@]|D|@]|E|$]]]|N|$]]

<p>If you are using <code>react-redux</code> and wrapped your component in <code>connect</code> function then you need to pass fourth argument i.e. forwardRef like this.</p>
<pre><code>connect(mapStateToProps, mapDispatchToProps, null, {forwardRef: true})
</code></pre>
<p>I hope it will be helpful.</p>


<p>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.</p>

<p>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.</p>

<p>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.</p>

<p>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: <code>ref.current is null</code></p>

<p>Below some code:</p>

<pre><code>class Calendar extends Component {
    calendarBodyRef = React.createRef();

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

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


React ref.current is null

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我正在开发一个具有可变时间范围的日程/日历应用程序。要显示当前时间的一行，并显示已完成约会的块，我需要计算给定时间范围内每分钟对应的像素数。例如:如果议程从早上7点开始，到下午5点结束，总行程是10小时。假设日历的主体有1000个像素。这意味着每小时代表100个像素，每分钟代表1，66个像素。如果现在是下午3点的话。我...

问React ref.current为空
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问React ref.current为空EN