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?

Vlado Pandžić · Accepted Answer · 2017-07-26 20:37:10Z

3

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"

answered Jul 26, 2017 at 20:37

Vlado Pandžić

5,0758 gold badges50 silver badges82 bronze badges

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

2 Comments

idude Over a year ago

Interesting, but how would you recommend I do that with the circle object as mentioned in the question? I can't instantiate circle without giving it a DOM element to attach it to, and I don't want to confuse react by creating an element without letting react know.

Dimitar Christoff Over a year ago

this ref api is deprecated. ref={el => this.bar = el}. you won’t need to traverse the DOM—it’s the actual HTMLElement or React.Component so you can work with DOM Element methods or instance methods. componentDidMount can then do new Circle(this.bar)

Vitaliy Mazurenko · Accepted Answer · 2017-07-26 20:39:47Z

2

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

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
Don't forget to unbind Circle library on component destroying. https://facebook.github.io/react/docs/react-component.html#componentwillunmount

answered Jul 26, 2017 at 20:39

Vitaliy Mazurenko

1468 bronze badges

Comments

Styr · Accepted Answer · 2017-07-26 20:42:31Z

1

If I understand it right, the Circle() will print out a element inside the DOM element you provide as a parameter. If it was me I would have a diferent approach on that. Instead of using that component to manage/edit the DOM element, use the result result of it to be printed inside the DOM element. So, if the Circle() returns a SVG code grab it and print it out inside the #container. If it is a script to generate a base64 image, get the result to print inside #.

I would avoid to use react as a DOM manager, as you can do with jQuery, instead try to think react as a blocks/components manager, so you replace a component with another.

answered Jul 26, 2017 at 20:42

Styr

133 bronze badges

Collectives™ on Stack Overflow

Render Normal JavaScript in React

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related