Javascript 一个字符串ref，"；网格“；，已在严格模式树中找到

我在控制台中面临警告：

警告：在中找到字符串引用“grid” 严格模式树。字符串引用是潜在错误和错误的来源 应该避免。我们建议改用useRef（）或createRef（）

以下是我的代码行：

render（）{
返回(
便笺
this.handleSearch（text）}/>
);
}

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

NotesGrid组件如下所示：

从“砌体布局”导入砌体；
从“React”导入React；
从“/Note”导入注释；
导出默认类NotesGrid扩展React.Component{
componentDidMount（）{
var grid=this.refs.grid；
this.msnry=新砌体（网格{
itemSelector:“.note”，
列宽：200，
排水沟：10，
isFitWidth:正确
});
}
componentDidUpdate（prevProps）{
if（this.props.notes.length！==prevProps.notes.length）{
this.msnry.reloadItems（）；
this.msnry.layout（）；
}
}
render（）{
var onNoteDelete=this.props.onNoteDelete；
返回(
//这里我使用了ref
{this.props.notes.map（函数（note））{
返回(
{note.text}
);
})}
);
}
}

---

解决此问题的最佳替代方案是什么？

问题在于组件NotesGrid。检查组件是否使用了“ref”。

---

如果ref正在该组件中使用。使用React.createRef（）（如果是类组件）或使用useRef（如果是功能组件）创建ref问题在于组件NotesGrid。检查组件是否使用了“ref”。

---

如果ref正在该组件中使用。使用React.createRef（）（如果是类组件）或使用useRef（如果是功能组件）创建ref

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

从“砌体布局”导入砌体；
从“React”导入React；
从“/Note”导入注释；
导出默认类NotesGrid扩展React.Component{
建造师（道具）{
超级（道具）；
this.gridRef=React.createRef（）；
}
componentDidMount（）{
this.msnry=新砌体（this.gridRef.current{
itemSelector:“.note”，
列宽：200，
排水沟：10，
isFitWidth:正确
});
}
componentDidUpdate（prevProps）{
if（this.props.notes.length！==prevProps.notes.length）{
this.msnry.reloadItems（）；
this.msnry.layout（）；
}
}
render（）{
var onNoteDelete=this.props.onNoteDelete；
返回(
{this.props.notes.map（（note）=>(
{note.text}
))}
);
}
}

按如下所示重写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>
    );
  }
}

从“砌体布局”导入砌体；
从“React”导入React；
从“/Note”导入注释；
导出默认类NotesGrid扩展React.Component{
建造师（道具）{
超级（道具）；
this.gridRef=React.createRef（）；
}
componentDidMount（）{
this.msnry=新砌体（this.gridRef.current{
itemSelector:“.note”，
列宽：200，
排水沟：10，
isFitWidth:正确
});
}
componentDidUpdate（prevProps）{
if（this.props.notes.length！==prevProps.notes.length）{
this.msnry.reloadItems（）；
this.msnry.layout（）；
}
}
render（）{
var onNoteDelete=this.props.onNoteDelete；
返回(
{this.props.notes.map（（note）=>(
{note.text}
))}
);
}
}

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