React/Angular中如何将唯一ID转换为refs？

这个动态索引场景下的refs转换其实很容易解决，咱们换个更靠谱的方式处理动态refs就好——React官方已经不推荐用字符串refs了，咱们用回调refs来存储每个索引对应的DOM元素，这样操作起来比document.getElementById更直接：

步骤1：初始化存储动态refs的容器 #

在你的类组件里，先定义一个对象来保存每个索引对应的DOM元素（如果是函数组件可以用useRef({})）：

class YourLoanComponent extends React.Component {
  // 用对象存储不同索引对应的ref，键就是index值
  loanRefs = {};

  // 你的showLessDetail方法修改如下
  showLessDetail(index) {
    // 直接通过索引从对象中取对应的DOM元素
    const targetDiv = this.loanRefs[index];
    if (targetDiv) {
      targetDiv.style.display = 'none';
    }
  }

  render() {
    return (
      // 替换原来的字符串ref，改用回调ref
      <div 
        className="divLoan" 
        // 回调ref：把当前DOM元素存入loanRefs，键为当前组件的index
        ref={element => this.loanRefs[this.props.index] = element}
      >
        {/* 你的div内容 */}
        {/* 假设这里有触发showLessDetail的按钮 */}
        <button onClick={() => this.showLessDetail(this.props.index)}>收起详情</button>
      </div>
    );
  }
}

补充：如果是循环渲染多个元素的场景 #

如果你是在循环（比如map）里渲染多个divLoan，只需要把循环的索引作为键存入loanRefs即可：

render() {
  const { loans } = this.props;
  return (
    <div>
      {loans.map((loan, index) => (
        <div 
          key={index}
          className="divLoan" 
          ref={element => this.loanRefs[index] = element}
        >
          {/* 单条贷款内容 */}
          <button onClick={() => this.showLessDetail(index)}>收起详情</button>
        </div>
      ))}
    </div>
  );
}

为什么不用原来的字符串refs？ #

React官方已经标记字符串refs为过时特性，回调refs或createRef/useRef的方式更可靠，尤其是在动态渲染、条件渲染的场景下，能避免字符串refs可能出现的引用不稳定问题。

内容的提问来源于stack exchange，提问作者John Ken