javascript - Render HTML without the extra "data-reactid" DOM attribute in React.js? -
so, i'm doing in 1 of 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 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 renders outputs like:
<li class="example-group-title" data-reactid=".0.0.2.0.$2083428221.0.1.0:0.0">group title</li> in other react.js file, i've got:
var stuffapp = require('./components/stuffapp.react'); reactdom.render( <stuffapp />, document.getelementbyid('main-content') ); how render html doesn't include dom attribute markup (that is, data-reactid)? want try , save bits, ya know? i've been reading related https://facebook.github.io/react/docs/top-level-api.html reactdomserver, wondering if there easier way? if not, how integrate that?
the method you're looking reactdom.rendertostaticmarkup.
from docs:
similar rendertostring, except doesn't create dom attributes such data-react-id, react uses internally. useful if want use react simple static page generator, stripping away attributes can save lots of bytes.
this makes difference if you're rendering on server. also, markup won't compatible react, it's useful display components.
however, statement made confuses me:
how render html doesn't include dom attribute markup (that is, data-reactid)? want try , save bits, ya know?
if you're trying save bits, don't on client (which react runs), on server transfer fewer bits down client. once app running on client's browser, don't need worry memory dom attributes take (which literally bits you'd saving).
Comments
Post a Comment