Question

我在边栏中固定了一个样式化的单选按钮列表，单击这些按钮时，将相应区域从主区域滚动到视图中。单选按钮列表和主区域内的组件都是从状态数组映射的，该状态数组称为usedComponents，其中包含组件属性和ID的对象。假设数组包含10个对象，每个对象看起来像这样：

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

为了在单选按钮上单击以实现滚动到视图，我必须在构造函数中创建对组件的引用。我为usedComponents状态数组中包含的每个组件手动创建了引用，并将它们绑定到componentType，如下所示：

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

然后，我将引用传递给每个相应的组件，并在我的selectComponentHandler中，将scrollIntoView设置为调用与主区域组件引用相对应的单选按钮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数组中的所有组件动态创建引用，并在插入新组件时对其进行更新。也许将它们绑定到ID？

编辑：我尝试像这样在构造函数内部映射引用：

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

可以从状态对象数组动态创建React.createRef（）吗？

1 个答案: