reactjs - react : how to forward refs to multiple children?

Question

我正在尝试将多个引用转发到多个子 DOM 节点:
我需要对 7 个按钮的引用，以便我可以管理它们之间的焦点。
我尝试使用 React.createRef() 数组，然后使用 index 将该数组的每个元素附加到子元素，但所有引用都引用最后一个按钮。< br/>为什么以及还有其他解决方案吗？

class RestaurantsList extends Component {
  references = Array(7).fill(React.createRef());

  render() {
    return (
      <ul 
        id="restaurants-list"
        role="menu"
      >
        {
          this.props.restaurants.map((restaurant, index) => {
            return (
              <Restaurant 
                ref={this.references[index]}
                name={restaurant.name}
              />
            );
          })
        }
      </ul>
    );
  }
}

const Restaurant = React.forwardRef((props, ref) => {
  return (
    <li>
      <button 
        ref={ref}
      >
        {name}
      </button>
    </li>
  );
})

Answer 1

正如评论中所讨论的，最好的方法是将引用列表保留为父组件内的数组或对象属性。

至于Array.prototype.fill()，其参数仅计算一次。换句话说，fill(React.createRef()) 将生成列表，其中每个条目都将引用同一个对象 - 并且您将获得与最后一个元素相同的ref。因此，您需要使用 .map() 来获取唯一的引用对象。

references = Array(7).fill(0).map(() => React.createRef());

无论如何，在现实世界的项目中，这宁愿发生在 constructor() 或 componentDidUpdate() 中。

但我相信最好有 hashmap:

references = {};

getOrCreateRef(id) {
    if (!this.references.hasOwnProperty(id)) {
        this.references[id] = React.createRef();
    }
    return this.references[id];
}

render() {
    return (
    ....
    {
      this.props.restaurants.map((restaurant, index) => {
        return (
          <Restaurant 
            ref={this.getOrCreateRef(restaurant.id)}
            key={restaurant.id}
            name={restaurant.name}
          />
        );
      })
    }    

此外，您还需要一些辅助方法来避免将 this.references 暴露给外部世界:

focusById(id) {
    this.references[id].current && this.references[id].current.focus();
}

并特别注意清理对未安装元素的引用。否则，如果动态更改餐馆列表，您可能会出现内存泄漏(如果 ref 保留在 this.references 中，即使它已被分离，它也会保留对 HTML 元素的引用)。实际需要取决于您的组件的使用方式。此外，一旦容器(具有 reference = {})因导航而自行卸载，此内存泄漏将得到修复。