Question

所以我在使用ref's和React时遇到了一些麻烦。

我要做的就是使用ref这样的方式打印元素的文本内容：

export default class SomeClass extends Component {
  constructor(props) {
    super(props);
    this.intro = React.createRef();
    console.log(this.intro.textContent);
  }

  render() {
    return (
      <div ref={this.intro}>Hi</div>
    )
  }
}

但是，这总是打印null或undefined而不是我想要的“ Hi”。

Answer 1

这是因为您正在将其记录在构造函数中。在componentDidMount lifecyle中运行代码。

export default class SomeClass extends Component {
  constructor(props) {
    super(props);
    this.intro = React.createRef();

  }


componentDidMount(){
      console.log(this.intro.textContent);
    }

  render() {
    return (
      <div ref={this.intro}>Hi</div>
    )
  }
}

Answer 2

您正在控制台中实际渲染Dom之前登录构造函数。尝试在控制台上登录onClick处理程序。

{{1}}

}

Answer 3

您应将current与ref一起使用，例如this.ref.current.textContent

查看stackblitz演示Here

export default class App extends Component {
  constructor(props) {
    super(props);
    this.intro = React.createRef();
  }

 componentDidMount(){
      console.log( this.intro.current.textContent);
    }

 render() {
    return (
      <div ref={this.intro}>Hi</div>
    )
  }
}

反应参考未定义

3 个答案: