javascript - React. Cannot get the component element in the DOM - Stack Overflow

admin管理员组

文章数量:1342526

I'm trying to insert the innerHTML for the div container ed. But I cannot get it after the React has render it. I understand that it's the problem with the stages of render, because I get null for this div container. What is I'm making the wrong?

class Test extends React.Component {
  render() {
    return (
      <div> 
        <div id='ed'>
        <p>{this.props.prop.text}</p>
        </div> 
        {document.querySelector('#ed').innerHTML = this.props.prop[1]} // this the problem
      </div> 
    );
  }
}

ReactDOM.render(
  <Test prop={store.getState()} />,
  document.getElementById('root')
);

I'm trying to insert the innerHTML for the div container ed. But I cannot get it after the React has render it. I understand that it's the problem with the stages of render, because I get null for this div container. What is I'm making the wrong?

class Test extends React.Component {
  render() {
    return (
      <div> 
        <div id='ed'>
        <p>{this.props.prop.text}</p>
        </div> 
        {document.querySelector('#ed').innerHTML = this.props.prop[1]} // this the problem
      </div> 
    );
  }
}

ReactDOM.render(
  <Test prop={store.getState()} />,
  document.getElementById('root')
);

• javascript
• reactjs

Share Improve this question Follow edited Mar 10, 2018 at 23:33 Max Wolfen asked Mar 10, 2018 at 23:28 Max WolfenMax Wolfen 2,04366 gold badges2727 silver badges4242 bronze badges 0

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 7

Your direct DOM manipulation won't work cause you called it in render().

You called Query selector in render(), Query selector or findDOMNode() only works on mounted ponents (that is, ponents that have been placed in the DOM).

If you try to call this on a ponent that has not been mounted yet (like calling Query selector or findDOMNode() in render() on a ponent that has yet to be created) an exception will be thrown.

you can do expressions in render() usually, but you can't get access the DOM element in render() since it is placing your elements in render() to DOM.

Use lifeCycle methods instead and You can use ReactDOM.findDOMNode(this) to access the underlying DOM node. But accessing the DOM node and manipulating like you do is against the React style of programming.

Query selector shouldn't be necessary with react just attach a ref to the element you want and you have access to it within any function of the react ponent.

Example Demo : demo

Try using the lifecycle event ponentDidMount

class Test extends React.Component {
  ponentDidMount() {
    const element = document.querySelector('#ed');
    if (element) {
      element.innerHTML = this.props.prop[1]
    }
  }
  render() {
    return (
      <div> 
        <div id='ed'>
          <p>{this.props.prop.text}</p>
        </div> 
      </div> 
    );
  }
}

You need to wait for the ponent to mount. You can do this by putting your code in a ponentDidMount method.

ponentDidMount() {
    document.querySelector('#ed').innerHTML = "woo"
}

You may also reference the container div with ref={node => this.node = node}

本文标签： javascriptReact Cannot get the component element in the DOMStack Overflow