idude idude - 1 year ago 94
React JSX Question

Render Normal JavaScript in React

So I'm new to react and I'm trying to understand how non-react code and react code can interact.

So for example, let's say I have a library which draws a circle in a DOM element with syntax like this:

c = new Circle('#container')


and as soon as that code is executed, a circle is drawn in the DOM element with an id of
container
.

If I wanted to create a React component based off of this, how would I go about it? This is what I had in mind:

var circ = React.createClass({

componentDidMount: function(){
c = new Circle('#container')
},

render: function(){
return (
<div id="container"></div>
);
}

});


Is this acceptable, or is there a better way to go about this?

Answer Source

Yes, your approach is right, but there are few moments you need to keep in mind.

  1. React can rerender it's DOM and bindings of Circle library can be broken. So use shouldComponentUpdate() to control render process. https://facebook.github.io/react/docs/react-component.html#shouldcomponentupdate
  2. Don't forget to unbind Circle library on component destroying. https://facebook.github.io/react/docs/react-component.html#componentwillunmount
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download