React中获取节点文本失败，求正确的文本获取方法

嗨，我来帮你搞定这个问题！你遇到的核心问题是用了React已经废弃的字符串形式refs，而且获取文本的方式也需要调整下，我给你一步步讲正确的做法：

1. 先搞懂为什么你的旧方法不行 #

React早就不推荐使用字符串refs（比如refs="hello"这种写法）了，这种方式不仅有性能问题，还可能导致一些难以排查的bug，所以官方现在建议用createRef或者回调refs来获取DOM节点。

2. 方法一：使用createRef（React 16.3+ 推荐） #

这是类组件里最常用的refs方式，步骤很简单：

• 先在组件里声明一个ref实例
• 把这个ref绑定到<p>标签上
• 在方法里通过ref.current获取DOM节点，再提取文本

代码示例：

class YourComponent extends React.Component {
  // 直接用类字段声明ref，不用写构造函数也可以
  helloRef = React.createRef();

  makeSmall = () => {
    // 确保DOM节点已经挂载，避免null报错
    if (this.helloRef.current) {
      // 推荐用textContent，比innerText兼容性更好、更可靠
      const text = this.helloRef.current.textContent;
      console.log(text);
    }
  };

  render() {
    return (
      <p className="Blend" ref={this.helloRef}>
        {`${this.state.landing}?utm_campaign=${this.state.utm}`}
      </p>
    );
  }
}

3. 方法二：回调refs（兼容更早React版本） #

如果你的React版本低于16.3，或者需要更灵活的DOM节点控制，可以用回调refs：

class YourComponent extends React.Component {
  constructor(props) {
    super(props);
    this.helloRef = null;
    // 定义一个回调函数来保存DOM节点引用
    this.setHelloRef = (element) => {
      this.helloRef = element;
    };
  }

  makeSmall = () => {
    if (this.helloRef) {
      const text = this.helloRef.textContent;
      console.log(text);
    }
  };

  render() {
    return (
      <p className="Blend" ref={this.setHelloRef}>
        {`${this.state.landing}?utm_campaign=${this.state.utm}`}
      </p>
    );
  }
}

4. 为什么用className访问无效？ #

你尝试通过className获取节点没成功，大概率是因为调用makeSmall的时候组件还没挂载完成，DOM里还没有这个<p>元素。比如如果在componentDidMount之前调用，document.querySelector('.Blend')就会返回null。不过即使能拿到，React也更推荐用refs，因为refs是组件内部的引用，不会和全局DOM查询产生冲突。

小提示：innerText vs textContent #

• textContent：会获取元素下所有文本内容（包括隐藏元素的文本），兼容性更好（IE9+），性能也更优
• innerText：会考虑元素的样式，比如隐藏的元素文本不会被获取，不同浏览器可能有差异
  所以优先用textContent来提取文本哦～

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