Michael Sebastian February 2016

Render HTML without the extra "data-reactid" DOM attribute in React.js?

So, I'm doing something like this in one of my react.js files:

 render: function() { 
    var stuff = this.props.stuff;

    function getHtmlForKey(key_name, title) {
        var key_name = key_name.toLowerCase();
            return Object.keys(thing).filter(function(key) {
                return key && key.toLowerCase().indexOf(key_name) === 0;
            }).map(function(key, index) {
                var group_title = index === 0 ? title : '';
                if(profile[key] != null && thing[key] != "") {
                    return (
                        <span>
                        {group_title ? (
                            <li className="example-group-class">{group_title}</li>
                        ) : null }
                        <li key={key} className="example-class">
                            {thing[key]}
                        </li>
                        </span>
                    );
                }    
            }, this);
    }

    /** Grouping by keyword **/
    var group1 = getHtmlForKey('stuff1', 'Group Title 1');

    /** Return Facecards **/
    if (stuff) {
        return (
            <div className="col-md-6">
                <div className="media">
                    <div className="pull-left">
                        <a href="#" onClick={this.open}>
                            <img src={this.props.stuff} className="media" />
                        </a>
                    </div>
                    <div className="top">
                        {group1}
                    </div>
       }
}

When this renders it outputs something like:

  <li class="example-group-title" data-reactid=".0.0.2.0.$2083428221.0.1.0:0.0">Group Title</li>

In my other react.js file, i've got:

    var StuffApp = require('./components/StuffApp.react')        

Answers


rossipedia February 2016

The method you're looking for is ReactDOM.renderToStaticMarkup.

From the docs:

Similar to renderToString, except this doesn't create extra DOM attributes such as data-react-id, that React uses internally. This is useful if you want to use React as a simple static page generator, as stripping away the extra attributes can save lots of bytes.

This only makes a difference if you're rendering on the server. Also, this markup won't be compatible with React, so it's really only useful for display only Components.

However, this statement you made confuses me:

How do I render the HTML so it doesn't include all the extra DOM attribute markup (that is, the data-reactid)? I just want to try and save some bits, ya know?

If you're trying to save bits, you don't do it on the client (which is where React runs), you do it on the server so that you transfer fewer bits down to the client. Once the app is running on the client's browser, you don't really need to worry about the extra memory that those DOM attributes take up (which are literally the only bits you'd be saving).


Radosław M February 2016

Don't worry about it - as of React version 0.15.0-alpha.1, there's only data-reactroot attribute on root node.

Post Status

Asked in February 2016
Viewed 1,810 times
Voted 11
Answered 2 times

Search




Leave an answer