我在控制台中面临警告：

警告：在严格模式树中发现了字符串引用“grid”。字符串引用是潜在错误的来源，应该避免。我们建议改用 useRef() 或 createRef()。

这是我的代码行：

  render() {
    return (
      <div className="notes-app"> 
        <h2 className="app-header">NotesApp</h2> 
        <NoteSearch onSearch={text => this.handleSearch(text)} />
        <NoteEditor onNoteAdd={this.handleNoteAdd} />
        <NotesGrid
          notes={this.state.filteredNotes}
          onNoteDelete={this.handleNoteDelete}
        />
      </div>
    );
  }

代码编辑器的片段显示了警告指向的行

NotesGrid 组件如下：

import Masonry from "masonry-layout";

import React from 'react';
import Note from "./Note";
export default class NotesGrid extends React.Component {
    componentDidMount() {
      var grid = this.refs.grid;
      this.msnry = new Masonry(grid, {
        itemSelector: ".note",
        columnWidth: 200,
        gutter: 10,
        isFitWidth: true
      });
    }

    componentDidUpdate(prevProps) {
      if (this.props.notes.length !== prevProps.notes.length) {
        this.msnry.reloadItems();
        this.msnry.layout();
      }
    }

    render() {
      var onNoteDelete = this.props.onNoteDelete;

      return (
        <div className="notes-grid" ref="grid"> //here I Have used the ref
          {this.props.notes.map(function(note) {
            return (
              <Note
                key={note.id}
                onDelete={onNoteDelete.bind(null, note)}
                color={note.color}
              >
                {note.text}
              </Note>
            );
          })}
        </div>
      );
    }
  }

解决它的最佳选择是什么？