React技术问询：如何从活动元素获取spanNav2的Ref并替换数值

嘿，我来帮你搞定这个React元素Ref获取和内容更新的问题～

从你的代码片段来看，你用的是类组件（用到了this.state），那我们就针对类组件的场景来解决：

方法一：使用createRef直接操作DOM（适合必须操作DOM的场景） #

1. 初始化Ref并绑定到目标元素 #

首先在组件的构造函数里创建一个Ref，然后把它绑定到spanNav2上：

constructor(props) {
  super(props);
  this.state = {
    open: false
  };
  // 初始化spanNav2的Ref
  this.spanNav2Ref = React.createRef();
}

// 对应的JSX部分
<span ref={this.spanNav2Ref} className="spanNav2">2</span>

2. 在点击事件中更新内容 #

现在你就可以在onButtonClick方法里通过Ref拿到这个span元素，直接修改它的文本内容了：

onButtonClick = value => {
  const open = !this.state.open;
  const navigate = `c...`; // 保留你原来的逻辑
  
  // 检查Ref是否绑定成功，然后替换内容为传入的value
  if (this.spanNav2Ref.current) {
    this.spanNav2Ref.current.textContent = value;
  }
  
  // 其他原有逻辑，比如更新state
  this.setState({ open });
};

方法二：用State控制内容（更符合React数据流理念） #

其实更推荐的React写法是把这个数字存在组件的state里，通过state来驱动视图渲染，避免直接操作DOM：

1. 在state里添加数字状态 #

constructor(props) {
  super(props);
  this.state = {
    open: false,
    navNumber: 2 // 初始值设为2
  };
}

2. JSX直接渲染state值 #

<span className="spanNav2">{this.state.navNumber}</span>

3. 点击时更新state #

onButtonClick = value => {
  const open = !this.state.open;
  // 直接更新state里的数字值
  this.setState({ open, navNumber: value });
};

这种方式更贴合React的单向数据流思想，也更易于维护和调试。

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