web-dev-qa-db-ja.com

React ref.currentはnullです

私は、可変時間範囲の議題/カレンダーアプリに取り組んでいます。現在の時間の線を表示し、行われた予定のブロックを表示するには、指定された時間範囲内で1分間に対応するピクセル数を計算する必要があります。

たとえば、アジェンダが朝の7時に始まり、午後の5時に終わる場合、合計範囲は10時間です。カレンダーの本体の高さが1000ピクセルであるとしましょう。つまり、1時間ごとに100ピクセル、1分ごとに1,66ピクセルを表します。

現在時刻が午後3時の場合。議題の開始から480分です。つまり、現在の時刻を示す線は、カレンダー本体の上部から796,8ピクセル（480 * 1,66）にある必要があります。

計算には問題ありませんが、議題本文の高さを取得できます。高さを取得するためにReact Refを使用することを考えていましたが、エラーが発生します：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>
        );
    }
}
reactjsref
13
Thore

コンポーネント状態での計算された本体の高さの保存を避けることが望ましい場合、別のアプローチは、次のように2番目のref（つまりelementDisplayHeightRef）を導入することです。

_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()
    }
}
_

このアプローチは、displayCurrentTimeLine()ライフサイクルフック（最初のcomponentDidMount()の後に呼び出される）中にrender()を呼び出して、両方のrefsが完全にコンポーネントロジックがdisplayCurrentTimeLine()でコンポーネントと対話する前に初期化されます。

お役に立てば幸いです。

0
Dacre Denny