fix: use React.createRef instead of string refs (#1282)

Author: PzYon

src/Agenda.js

@@ -10,6 +10,15 @@ import { inRange } from './utils/eventLevels'
 import { isSelected } from './utils/selection'
 
 class Agenda extends React.Component {
+  constructor(props) {
+    super(props)
+    this.headerRef = React.createRef()
+    this.dateColRef = React.createRef()
+    this.timeColRef = React.createRef()
+    this.contentRef = React.createRef()
+    this.tbodyRef = React.createRef()
+  }
+
   componentDidMount() {
     this._adjustHeader()
   }
@@ -33,22 +42,22 @@ class Agenda extends React.Component {
       <div className="rbc-agenda-view">
         {events.length !== 0 ? (
           <React.Fragment>
-            <table ref="header" className="rbc-agenda-table">
+            <table ref={this.headerRef} className="rbc-agenda-table">
               <thead>
                 <tr>
-                  <th className="rbc-header" ref="dateCol">
+                  <th className="rbc-header" ref={this.dateColRef}>
                     {messages.date}
                   </th>
-                  <th className="rbc-header" ref="timeCol">
+                  <th className="rbc-header" ref={this.timeColRef}>
                     {messages.time}
                   </th>
                   <th className="rbc-header">{messages.event}</th>
                 </tr>
               </thead>
             </table>
-            <div className="rbc-agenda-content" ref="content">
+            <div className="rbc-agenda-content" ref={this.contentRef}>
               <table className="rbc-agenda-table">
-                <tbody ref="tbody">
+                <tbody ref={this.tbodyRef}>
                   {range.map((day, idx) => this.renderDay(day, events, idx))}
                 </tbody>
               </table>
@@ -155,15 +164,16 @@ class Agenda extends React.Component {
   }
 
   _adjustHeader = () => {
-    if (!this.refs.tbody) return
+    if (!this.tbodyRef.current) return
 
-    let header = this.refs.header
-    let firstRow = this.refs.tbody.firstChild
+    let header = this.headerRef.current
+    let firstRow = this.tbodyRef.current.firstChild
 
     if (!firstRow) return
 
     let isOverflowing =
-      this.refs.content.scrollHeight > this.refs.content.clientHeight
+      this.contentRef.current.scrollHeight >
+      this.contentRef.current.clientHeight
     let widths = this._widths || []
 
     this._widths = [
@@ -172,8 +182,8 @@ class Agenda extends React.Component {
     ]
 
     if (widths[0] !== this._widths[0] || widths[1] !== this._widths[1]) {
-      this.refs.dateCol.style.width = this._widths[0] + 'px'
-      this.refs.timeCol.style.width = this._widths[1] + 'px'
+      this.dateColRef.current.style.width = this._widths[0] + 'px'
+      this.timeColRef.current.style.width = this._widths[1] + 'px'
     }
 
     if (isOverflowing) {

src/Calendar.js

@@ -897,7 +897,6 @@ class Calendar extends React.Component {
           />
         )}
         <View
-          ref="view"
           {...props}
           events={events}
           date={current}

src/Month.js

@@ -28,6 +28,7 @@ class MonthView extends React.Component {
 
     this._bgRows = []
     this._pendingSelection = []
+    this.slotRowRef = React.createRef()
     this.state = {
       rowLimit: 5,
       needLimitMeasure: true,
@@ -112,7 +113,7 @@ class MonthView extends React.Component {
     return (
       <DateContentRow
         key={weekIdx}
-        ref={weekIdx === 0 ? 'slotRow' : undefined}
+        ref={weekIdx === 0 ? this.slotRowRef : undefined}
         container={this.getContainer}
         className="rbc-month-row"
         getNow={getNow}
@@ -216,7 +217,7 @@ class MonthView extends React.Component {
   measureRowLimit() {
     this.setState({
       needLimitMeasure: false,
-      rowLimit: this.refs.slotRow.getRowLimit(),
+      rowLimit: this.slotRowRef.current.getRowLimit(),
     })
   }
 

src/Popup.js

@@ -9,9 +9,15 @@ import EventCell from './EventCell'
 import { isSelected } from './utils/selection'
 
 class Popup extends React.Component {
+  constructor(props) {
+    super(props)
+
+    this.rootRef = React.createRef()
+  }
+
   componentDidMount() {
     let { popupOffset = 5 } = this.props,
-      { top, left, width, height } = getOffset(this.refs.root),
+      { top, left, width, height } = getOffset(this.rootRef.current),
       viewBottom = window.innerHeight + getScrollTop(window),
       viewRight = window.innerWidth + getScrollLeft(window),
       bottom = top + height,
@@ -54,7 +60,7 @@ class Popup extends React.Component {
     }
 
     return (
-      <div ref="root" style={style} className="rbc-overlay">
+      <div ref={this.rootRef} style={style} className="rbc-overlay">
         <div className="rbc-overlay-header">
           {localizer.format(slotStart, 'dayHeaderFormat')}
         </div>

src/TimeGrid.js

@@ -22,6 +22,7 @@ export default class TimeGrid extends Component {
     this.state = { gutterWidth: undefined, isOverflowing: null }
 
     this.scrollRef = React.createRef()
+    this.contentRef = React.createRef()
   }
 
   componentWillMount() {
@@ -209,7 +210,7 @@ export default class TimeGrid extends Component {
           getDrilldownView={this.props.getDrilldownView}
         />
         <div
-          ref="content"
+          ref={this.contentRef}
           className="rbc-time-content"
           onScroll={this.handleScroll}
         >
@@ -253,7 +254,7 @@ export default class TimeGrid extends Component {
 
   applyScroll() {
     if (this._scrollRatio) {
-      const { content } = this.refs
+      const content = this.contentRef.current
       content.scrollTop = content.scrollHeight * this._scrollRatio
       // Only do this once
       this._scrollRatio = null
@@ -272,8 +273,8 @@ export default class TimeGrid extends Component {
   checkOverflow = () => {
     if (this._updatingOverflow) return
 
-    let isOverflowing =
-      this.refs.content.scrollHeight > this.refs.content.clientHeight
+    const content = this.contentRef.current
+    let isOverflowing = content.scrollHeight > content.clientHeight
 
     if (this.state.isOverflowing !== isOverflowing) {
       this._updatingOverflow = true