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

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 属性标记(即 data-reactid)？我只是想试着节省一些，你知道吗？我一直在阅读与 https://facebook.github.io/react/docs/top-level-api.html 相关的内容ReactDomServer，但想知道是否有更简单的方法？如果没有，我将如何整合它？

Answer 1

您正在寻找的方法是 ReactDOM.renderToStaticMarkup。

来自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.

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

但是，你的这段话让我很困惑:

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?

如果你想节省位，你不会在客户端(这是 React 运行的地方)做，你会在服务器上做，这样你就可以传输更少的位到客户端。一旦应用程序在客户端的浏览器上运行，您就不必担心那些 DOM 属性占用的额外内存(这实际上是您唯一要保存的部分)。