Question

我有一个使用组件显示的“选择”列表。我需要找到所有这些选择的渲染宽度。我的模板如下：

{props.selections.map((chip: SelectOptionType) => {
   return (
      <Chip text={chip.label} />
   )
}

通常，在非反应式应用程序中，我可能会在<Chip />上放置一个类，并使用jquery选择该类名称的元素，然后循环遍历并将宽度总和在一起：

let sum: number = 0;
$(".someClassName").forEach(($el) => sum += $el.offsetWidth);

我知道建议的做类似方法的方法是使用引用，但似乎无法创建引用数组。我试图做这样的事情：

{props.selections.map((chip: SelectOptionType, index: number) => {
   chipsRefs[index] = React.createRef<HTMLDivElement>();
   return (
      <div ref={chipsRefs[index]}>
         <Chip text={chip.label} />
      </div>
   )
}

但是当我迅速了解到chipsRefs内的每个Ref时，都以null current结尾。

现在，对此我有点不知所措，并尝试查找该用例的示例，但空无一物。

Answer 1

你可以试试吗？

ref={ref => {
   chipsRefs[index] = ref
}}

Answer 2

尝试执行以下操作：https://codesandbox.io/s/awesome-haibt-zeb8m

import React from "react";

class Selections extends React.Component {
  constructor(props) {
    super(props);
    this._nodes = new Map();
  }
  componentDidMount() {
    this.checkNodes();
  }

  checkNodes = () => {
    let totalWidth = 0;
    Array.from(this._nodes.values())
      .filter(node => node != null)
      .forEach(node => {
        totalWidth = totalWidth + node.offsetWidth;
      });

    console.log(totalWidth);
  };
  render() {
    const { selections } = this.props;
    return (
      <div>
        {selections.map((value, i) => (
          <div key={i} ref={c => this._nodes.set(i, c)}>
            {value}
          </div>
        ))}
      </div>
    );
  }
}

export default Selections;

我们在ref道具中定义的函数在以下时间执行 render。
在ref回调函数中，ref={c => this._nodes.set(i, c)} 我们传入.map()和html元素提供的索引（i）（c）由ref道具提供，在这种情况下为div本身。
this._nodes.set(i, c)将在我们的系统中创建一个新的键值对 this._nodes可迭代，我们创建的每个div一对。现在，我们记录了要使用的HTML元素（节点），其中包含我们计算呈现列表的totalWidth所需的所有方法。

最后在checkNodes()中，我们得到每个节点的.offsetWidth，以得到我们的totalWidth。

如何获取组件列表的累积宽度？

2 个答案: