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。

来自docs：

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

如果您在服务器上呈现，这只会产生影响。此外，此标记与React不兼容，因此它仅对仅显示组件非常有用。

然而，你所说的这句话让我感到困惑：

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

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

Answer 2

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

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

2 个答案: