在严格模式树中发现了一个字符串 ref，“grid”答案

【问题标题】：A string ref, "grid", has been found within a strict mode tree在严格模式树中发现了一个字符串 ref，“grid”
【发布时间】：2020-04-05 15:19:38
【问题描述】：

我在控制台中面临警告：

警告：在严格模式树。字符串引用是潜在错误的来源，并且应该避免。我们建议改用 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>
    );
  }

代码编辑器的 sn-p 显示警告指向的行

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>
      );
    }
  }

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

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

重写 NotesGrid 如下

import Masonry from "masonry-layout";
import React from 'react';

import Note from "./Note";

export default class NotesGrid extends React.Component {
  constructor(props) {
    super(props);
    this.gridRef = React.createRef();
  }

  componentDidMount() {
    this.msnry = new Masonry(this.gridRef.current, {
      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={this.gridRef}>
        {this.props.notes.map((note) => (
          <Note
            key={note.id}
            onDelete={onNoteDelete.bind(null, note)}
            color={note.color}
          >
            {note.text}
          </Note>
        ))}
      </div>
    );
  }
}

【讨论】：

【解决方案2】：

问题在于组件 NotesGrid。检查组件是否使用了'ref'。如果 ref 在该组件中使用。使用 React.createRef()（如果它是一个类组件）或使用 useRef（如果它是一个功能组件）创建 ref

【讨论】：

您能否简要介绍一下如何在 NotesGrid 组件中执行此操作？我已经更新了问题中的 NotesGrid 组件。
当然。将在下面发布 NotesGrid 组件。