Inject existing element into React

Question

I'm trying to inject an already existing element on the page into my react DOM in order to wrap around it.

Something like:

var someElement = document.getElementById("stuff")
var parent = someElement.parentNode;
var wrapper = document.createElement("div");
wrapper.id = "root1";
parent.replaceChild(wrapper, someElement);
wrapper.appendChild(someElement);

ReactDOM.render(
      <Wrapper child="{{someElement}}" />,
      document.getElementById("root1")
    );

I'm not sure how I can go about injecting the element into react + I need the styles of the element to stay as is.

KpTheConstructor · Accepted Answer · 2019-03-20 13:15:50Z

2

You could use React's dangerouslySetInnerHTML method like so:

function getHtml(){
    return "<h1>Hello World</h1>" // element.innerHTML (optional)
}


ReactDOM.render(
      <Wrapper> 
           <div dangerouslySetInnerHTML={{ __html: getHtml() }} />
     </Wrapper>,
      document.getElementById("root1")
    );

To add: <Wrapper/> should render { this.props.children }

Documentation here: https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml

Hope this helps!

answered Mar 20, 2019 at 13:15

KpTheConstructor

3,2991 gold badge16 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Inject existing element into React

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related