你如何获得裁判的名字？

Question

假设你有这个 JSX：

<div ref={this.divRef}>
  <SomeComponent />
</div>

如果你想获取 ref 的名称并将其添加到你的状态，你会怎么做？

类似：

componentDidMount() {
    // get all the positions of the current sections
    if (this.divRef.current) {
      this.setState({
        breakpoints: [{
          name: this.divRef.current.name,
          position: this.divRef.current.getBoundingClientRect().bottom,
        }],
      }, () => {
          // tslint:disable-next-line:no-console
          console.log(this.divRef.current, 'this.divRef.current')
      })
    }
  }

Answer 1

在你说过的评论中：

我想为每个 ref 分配一个名称，以便以后可以使用它

如果您真的指的是 ref，我能想到的唯一可靠方法是使用由 ref 键入的 WeakMap。 （尽管您可以使用以符号命名的属性，更多内容见下文。）

在你的构造函数中创建WeakMap（或者在你的模块中，我不知道需要多少代码才能使用这些名称）；

this.nameMap = new WeakMap();

然后当您需要获取/分配名称时：

let name = this.nameMap.get(this.divRef);
if (!name) {
    name = "some appropriate name";
    this.nameMap.set(this.divRef, name);
}

您可以使用以符号命名的属性，将名称存储在 ref 对象本身上，但通常在您的代码无法控制的对象上存储任意属性并不是一个好主意。但为了完整起见，您将在构造函数（或模块）中创建符号：

this.nameKey = Symbol("refname");

然后使用它：

// I don't recommend this
let name = this.divRef[this.nameKey];
if (!name) {
    name = "some appropriate name";
    this.divRef[this.nameKey] = name;
}

但我不推荐它。带有 Symbol 的环境也会有 WeakMap，我会在这里使用它。

---

但是，如果您指的是 ref 当前所指的元素，您可以使用 data-* attribute 来表示：

// Assuming you've checked that `current` isn't `null`
let name = this.divRef.getAttribute("data-name");
if (!name) {
    name = "some appropriate name";
    this.divRef.setAttribute("data-name", name);
}

如果您可以假设支持dataset，则可以改用dataset：

// Assuming you've checked that `current` isn't `null`
let name = this.divRef.dataset.name;
if (!name) {
    name = "some appropriate name";
    this.divRef.dataset.name = name;
}

也就是说，WeakMap 解决方案同样适用于元素和 refs：

let name = this.nameMap.get(this.divRef.current);
if (!name) {
    name = "some appropriate name";
    this.nameMap.set(this.divRef.current, name);
}