reactjs - React.createRef() 可以从状态对象数组动态创建吗？

Question

我在侧边栏中固定了一个样式单选按钮列表，单击这些单选按钮时，会将相应的组件从主区域滚动到 View 中。单选按钮列表和主区域内的组件都是从名为usedComponents 的状态数组映射的，该数组包含组件属性和id 的对象。假设该数组包含 10 个对象，每个对象如下所示:

{
  id: 1,
  group: "header",
  componentType: "headerLogo",
  componentName: "Header 01",
  //...rest of the component properties
}

为了在单击单选按钮时滚动到 View 中，我必须在构造函数内创建对组件的引用。我手动为usedComponents状态数组中包含的每个组件创建了引用，并将它们绑定(bind)到componentType，如下所示:

this.headerLogo = React.createRef();
this.headerLogoNavigation = React.createRef();
//...etc.

然后，我将引用传递给每个相应的组件，并在 selectComponentHandler 中设置 rollIntoView 来调用与主区域组件引用相对应的单选按钮 id。selectComponentHandler 如下所示:

selectComponentHandler = e => {
  const value = Number(e.target.value);
  const id = e.target.id; //returns componentType. For example "headerLogo"
  this.setState(prevState => {
    let selected = prevState.usedComponents
      .filter(item => item.id === value)
      .shift();
    let unSelected = prevState.usedComponents
      .filter(item => item.selected === true)
      .shift();
    if (unSelected) {
      unSelected.selected = false;
    }
    selected.selected = true;
    return { unSelected, selected };
  });
  this[id].current.scrollIntoView({ block: "start", behavior: "smooth" });
};

但是，我使用react-beautiful-dnd以便能够通过将新组件拖动到主区域来添加新组件，并且每当我添加已包含在usedComponents数组中的类型的新组件时，它与相同类型的旧组件具有相同的引用。这使得scrollIntoView始终滚动到行中第一个相同类型的组件，无论我选择哪个组件。有没有一种方法可以通过映射它们来动态地为usedComponents数组中的所有组件创建引用，并在插入新组件时更新它们。也许将它们与 ids 绑定(bind)？

编辑:我尝试在构造函数内映射引用，如下所示:

this.state.usedComponents.map(component => {
  const id = component.id.toString();
  return (this[id] = React.createRef());
});

它适用于已使用的 Components 数组中的组件，但是我仍然不知道当新对象通过拖放插入到usedComponents 数组中时如何更新引用。新插入的组件基本没有引用。

Answer 1

就像我在评论中提到的那样，我不会走动态引用的路线。这些引用的范围/大小可能会变大，并且有更好的方法来处理这个问题。只需使用 DOM。

渲染时，您只需将组件 ID 放在要滚动到的 html 元素上

<div id={component.id}> ... </div>

然后，当您想要滚动到该元素时，只需查询该元素的 DOM 并滚动到它

const elemToScrollTo = document.getElementById(component.id)
if (!!elemToScrollTo) {
  elemToScrollTo.scrollIntoView()
}