How to return HTML string from ReactJs for Javascript/jQuery manipulation

Question

var MyBox = React.createClass({
    rawMarkup: function() {
        var rawMarkup = marked(this.props.children.toString(), {sanitize: true});
        return { __html: rawMarkup };
    },
    getElements: function () {
        //I want to be able to return raw HTML string
        //from here to inject into another element via jQuery
    },
    loadCommentsFromServer: function() {
    },
    getInitialState: function() {
        return {data: []};
    },
    componentDidMount: function() {
        this.loadCommentsFromServer();
        window.drill = this;
    },
    render: function() {
        return (
            <ul>
                <li>item1</li>
                <li>item2</li>
                <li>item3</li>
            </ul>
        );
    }
});

via Javascript using jQuery I want to inject the output to another element like below

  $(clicked).html(window.drill.getElements());

Your window.this is the react component, not the actual HTML. Give your component an id, then you can simply read it from the DOM using jQuery. — wintvelt
– wintvelt, Commented Oct 21, 2015 at 8:29
Yup I am reading it via window.drill.getElements(). I hope you can give me a code sample. I am not familiar with component having IDs — agentpx
– agentpx, Commented Oct 21, 2015 at 8:36
Oh I get it. <ul> element should have id then read in from the DOM and I will take care of the data via this.state.data right? — agentpx
– agentpx, Commented Oct 21, 2015 at 8:39
My problem will be the rendering of the elements new values base on what the user's clicked. Those clickable items are not generated by ReactJs. Just a Bootstrap accordion/Panel rendered via AngularJs — agentpx
– agentpx, Commented Oct 21, 2015 at 8:42

wintvelt · Accepted Answer · 2015-10-21 09:53:18Z

2

Try to avoid having two owners/ updaters of the same component. You should really choose between:

A. make your react code the owner of all HTML inside the component.
B. do not use react to render the code, but let Angular/ BootstrapJS or whatever manipulate the DOM.

If you go with A, then change your react code to:

componentDidMount: function() {
    this.loadCommentsFromServer();
    // You do not need the window.drill = this here
},
render: function() {
    return (
        <ul id='foo'>
            <li>item1</li>
            <li>item2</li>
            <li>item3</li>
        </ul>
    );
}

And then have your code read the contents of the DOM by through javascript getElementByID('foo') of jQuery $('#foo'), which you can copy to somewhere else.

If you want to update the contents of the component based on what user clicks, your react component needs a listener to changes somewhere else (in your model, not in the DOM), and re-render the component with new props.
Then when the user clicks something, the onClick code should update model, which triggers re-render.

Hope this makes sense.

answered Oct 21, 2015 at 9:53

wintvelt

14.1k3 gold badges41 silver badges44 bronze badges

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

2 Comments

agentpx Over a year ago

Yup make sense. This is a great help. I could still use window.drill = this to trigger the listener and let React handle the output. And jquery for DOM manipulation just like you suggested. Thanks.

agentpx Over a year ago

The reason for such is because the data source location will come from Angular output which I can pass to React Listener to fetch the said data.Thanks.

Collectives™ on Stack Overflow

How to return HTML string from ReactJs for Javascript/jQuery manipulation

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related