Render Normal JavaScript in React

Question

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 1

For example if you want to interact with DOM, you can add special ref prop to some element like:

<div ref="blabla"></div>

and interact using regular javascript api, or other non-react apis.

ReactDOM.findDOMNode(this.refs["blabla"]).style.display='none'

Here I'm hiding element with ref "blabla"

Answer 2

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