在React.js中没有额外的"data-reactid"DOM属性渲染HTML？

Question

所以,我在我的一个react.js文件中做了类似的事情:

 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>
       }
}

当这呈现它输出如下:

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

在我的另一个react.js文件中,我得到了:

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

    ReactDOM.render(
    <StuffApp />,
     document.getElementById('main-content')
    );

如何呈现HTML以使其不包含所有额外的DOM属性标记(即数据重新标记)？我只是想尝试保存一些,你知道吗？我一直在阅读这篇与https://facebook.github.io/react/docs/top-level-api.html ReactDomServer 相关的内容,但是想知道是否有更简单的方法？如果没有,我将如何整合它？

Answer 1

你正在寻找的方法是ReactDOM.renderToStaticMarkup.

来自文档:

与renderToString类似,但这不会创建额外的DOM属性,例如react在内部使用的data-react-id.如果你想将React用作一个简单的静态页面生成器,这很有用,因为剥离额外的属性可以节省大量的字节.

如果您在服务器上进行渲染,这只会有所不同.此外,此标记与React不兼容,因此它仅对仅显示组件有用.

但是,你这句话让我困惑:

如何呈现HTML以使其不包含所有额外的DOM属性标记(即数据重新标记)？我只是想尝试保存一些,你知道吗？

如果您正在尝试保存位,则不要在客户端(这是React运行的位置)上执行此操作,而是在服务器上执行此操作,以便将较少的位传输到客户端.一旦应用程序在客户端的浏览器上运行,您实际上并不需要担心这些DOM属性占用的额外内存(这实际上是您要保存的唯一内容).

Answer 2

不要担心 - 从React版本开始0.15.0-alpha.1,data-reactroot根节点上只有属性.