Question

我有这个反应组件

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

输出html看起来像：

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

不是人类可读的。有没有办法格式化这个HTML输出？无法找到像gulp prettify这样的webpack插件。我认为它之所以这样做的部分原因是因为bbbc：label看起来像：

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

格式化xjs的html输出

0 个答案: