Reactjs：未捕获的类型错误：无法设置 null 的属性“innerHTML”

IT技术 javascript reactjs dom react-component
2021-05-27 04:43:03 
import React, { Component } from 'react';
import ReactDOM from 'react-dom';

export default class Game extends Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
    this.check = this.check.bind(this);
  }


 drawBackground() {
    console.log("worked");
}

  check () {
    this.myRef.current.innerHTML  = "Testing";
    {this.drawBackground()}      
  }

  render() {
    return (
        <div>
          <h1 ref={this.myRef} id="foo">bar</h1>
          {this.check()}
</div>
    );
  }
}

我需要访问函数中的text内部h1标记check，但出现此错误 Reactjs: Uncaught TypeError: Cannot set property 'innerHTML' of null。我遵循了文档。我错过了什么吗？

2个回答

在第一次 render() 之后首先设置 ref

检查演示一次演示

您在声明之后立即引用 ref，因为 ref 对象接收组件的已安装实例作为其当前实例。

如果您尝试同时访问 DOM，它会尝试生成它。this.myRef 不会返回任何东西，因为组件在渲染中没有真正的 DOM 表示。

您需要将值分配给 ref。您将 ref 作为函数传递。

class App extends React.Component {
  constructor(props) {
    super(props);
    this.check = this.check.bind(this);
  }

  state = {
    dom: null
  };

  drawBackground() {
    console.log("worked");
  }

  componentDidMount() {
    this.check();
  }

  check() {
    const innerHTML = ReactDOM.findDOMNode(this.myRef).innerHTML;
    setTimeout(
      () => (ReactDOM.findDOMNode(this.myRef).innerHTML = "TEST"),
      1000
    );
    console.log(innerHTML);
    this.setState({
      dom: innerHTML
    });
    {
      this.drawBackground();
    }
  }

  render() {
    return (
      <div>
        <h1 ref={ref => (this.myRef = ref)} id="foo">
          bar
        </h1>{" "}
        //You need to assign the value of the ref to the instance variable
      </div>
    );
  }
}
其它你可能感兴趣的问题
上一篇使用 ReactJS + Redux 时是否需要 componentWillReceiveProps 和 replaceProps？ 下一篇与 TypeScript react - 如何导入方法