格式化xjs的html输出_Html_Reactjs_Webpack_Jsx

格式化xjs的html输出

html reactjs webpack

格式化xjs的html输出,html,reactjs,webpack,jsx,Html,Reactjs,Webpack,Jsx,我有这个反应组件 var Page = React.createClass({ render: function() { return ( <html> <head> <title>{this.props.title}</title> </head> <body> <h1>{this.props.tit

我有这个反应组件

var Page = React.createClass({
  render: function() {
    return (
      <html>
        <head>
          <title>{this.props.title}</title>
        </head>
        <body>
          <h1>{this.props.title}</h1>
          <BCCLabel title="aaa"></BCCLabel>
        </body>
      </html>
    );
  }
});

module.exports = function render(locals, callback) {
  var html = ReactDOMServer.renderToStaticMarkup(React.createElement(Page, locals))
  callback(null, '<!DOCTYPE html>\n' + html)
};

var Page=React.createClass({
render:function（）{
返回(
{this.props.title}
{this.props.title}
);
}
});
module.exports=函数呈现（局部变量、回调）{
var html=ReactDOMServer.renderToStaticMarkup（React.createElement（Page，locals））
回调（空，'\n'+html）
};

输出html如下所示：

<!DOCTYPE html>
<html><head><title></title></head><body><h1></h1><div><bcc:label title="aaa">Some text</bcc:label></div></body></html>

render: function() {
    return (<div dangerouslySetInnerHTML={{
      __html: '<bcc:label title="' + this.props.title + '">Some text</bcc:label>'
    }}/>);
  }


一些文本

不太容易让人读懂。有没有办法格式化这个html输出？找不到像gulp prettify这样的网页包插件。我认为它这样做的部分原因是因为bbbc:label看起来像：

<!DOCTYPE html>
<html><head><title></title></head><body><h1></h1><div><bcc:label title="aaa">Some text</bcc:label></div></body></html>

render: function() {
    return (<div dangerouslySetInnerHTML={{
      __html: '<bcc:label title="' + this.props.title + '">Some text</bcc:label>'
    }}/>);
  }

render:function（）{
返回（）；
}

我不知道有什么办法可以强迫你这么做。你为什么想要它漂亮？浏览器不关心，您应该编辑JSX代码，而不是生成的HTML。因为

renderToStaticMarkup

返回一个字符串文本，它只会发出一个长字符串，正如我们所看到的。有关格式设置，请查看NPM上的

htmlidy

up。似乎正是你所需要的。我认为，现在，这可能是没有必要的。有人让我这么做的原因需要更多的解释，我不想在这里输入。谢谢你的帮助。