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

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

本文关键字：data-reactid 属性 DOM js React HTML      更新时间：2023-09-26

所以，我在我的一个 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 相关的内容，但想知道是否有更简单的方法？如果没有，我将如何整合它？

您要查找的方法ReactDOM.renderToStaticMarkup 。

从文档中：

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

这仅在服务器上渲染时才有所不同。此外，此标记与 React 不兼容，因此它实际上只对仅显示组件有用。

但是，您所做的这句话让我感到困惑：

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

如果你试图保存位，你不会在客户端(这是 React 运行的地方(上执行此操作，而是在服务器上执行此操作，以便将更少的位传输到客户端。一旦应用程序在客户端的浏览器上运行，您就不需要真正担心这些 DOM 属性占用的额外内存(这实际上是您唯一要保存的位(。

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

相关文章：