javascript - 你如何获得裁判的姓名？

Question

假设你有这个 JSX:

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

你想获取裁判的名字并将其添加到你的状态中，你会怎么做？

类似于:

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

在您的评论中:

I want to assign each ref a name so I can use it later on

如果您真的是指 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);
}