Javascript 呈现HTML时不使用额外的“"；“数据反应ID”；React.js中的DOM属性？

因此，我在我的一个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>
       }
}

render:function（）{
var stuff=this.props.stuff；
函数GetHtmlWorkey（键名称、标题）{
var key_name=key_name.toLowerCase（）；
返回Object.keys（thing）.filter（function（key）{
返回key&&key.toLowerCase（）.indexOf（key\u name）==0；
}).map（函数（键、索引）{
变量组标题=索引===0？标题：“”；
if（profile[key]！=null&&thing[key]！=“”）{
返回(
{组名称(
{group_title}
)：null}

{东西[钥匙]}

);
}    
}，这个）；
}
/**按关键字分组**/
var group1=GetHtmlWorkey（'stuff1'，'Group Title 1'）；
/**回传名片**/
如果（东西）{
返回(
{group1}
}
}

当渲染时，它会输出如下内容：

  <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')
    );

var StuffApp=require（'./components/StuffApp.react'）；
ReactDOM.render(
,
document.getElementById（'main-content'）
);

---

如何呈现HTML，使其不包含所有额外的DOM属性标记（即数据ID）？我只是想尝试保存一些位，你知道吗？我一直在阅读与ReactDomServer相关的文章，但想知道是否有更简单的方法？如果没有，我将如何集成它？

您正在寻找的方法是

ReactDOM.renderToStaticMarkup

从：

与renderToString类似，只是它不会创建额外的DOM属性，如react内部使用的data react id。如果要将react用作简单的静态页面生成器，这非常有用，因为剥离额外的属性可以节省大量字节

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

然而，你的这句话让我很困惑：

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

---

如果您试图保存位，您不需要在客户端（React运行的地方）上执行，而是在服务器上执行，以便将较少的位向下传输到客户端。一旦应用程序在客户端浏览器上运行，您就不必担心这些DOM属性占用的额外内存（从字面上看，这是您唯一可以节省的部分）.

不用担心-从React版本

0.15.0-alpha.1

开始，根节点上只有

数据reactroot

属性。

你在服务器上使用React呈现页面，然后传输它？为什么？嘿@Qwertiy-我对React.js完全是新手，所以我不确定你的意思-你能详细说明一下吗？你的呈现很简单服务器端还是客户端？我们呈现的是客户端，而不是这些ID有什么问题？因此，除非我在服务器上（在那里我可以使用这些方法），我真的无法删除这些react ID？或者换一种方式问，如果我在客户端，是否有任何react方法可以帮助删除它？只是好奇如果您使用

ReactDOM.render

，则不能删除它。如果您使用

ReactDOM.renderToStaticMarkup

（返回字符串），您必须自己设置目标元素的

innerHTML

，它将是一个纯静态元素，这意味着您将失去React的所有好处。是的…甚至我只对一个属性感到困惑！！！n我到处搜索..我遗漏了什么吗：-）