React renderToStaticMarkup和" Invariant Violation:无效标记"错误

时间:2016-04-19 05:23:17

标签: javascript node.js reactjs jsx babel

我一直在"不变违规:标签无效"我尝试将jsx文件转换为js然后生成html以保存到静态html文件时出错。这是我的test.js文件:

var fs = require("fs");
var babel = require("babel-core");
var React = require("react");
var ReactDOMServer = require("react-dom/server");
fs.readFile('./template.js', function(err, data) {
    var template = babel.transform(data, {
        "presets": ["es2015", "react"],
        "plugins": ["transform-es2015-modules-umd"]
    });
    template = React.createElement(template.code);
    console.log(ReactDOMServer.renderToStaticMarkup(template));
});

这是我的template.js文件:

const React = require('React');

module.exports = React.createClass({
  render: function() {
    return <div>Hello {this.props.name}</div>;
  }
});

这是控制台转储:

Bills-MBP:white-label bshack$ node test.js
/Users/bshack/Sites/white-label/node_modules/react/node_modules/fbjs/lib/invariant.js:45
    throw error;
    ^

Invariant Violation: Invalid tag: (function (global, factory) {
  if (typeof define === "function" && define.amd) {
    define(['module', 'React'], factory);
  } else if (typeof exports !== "undefined") {
    factory(module, require('React'));
  } else {
    var mod = {
      exports: {}
    };
    factory(mod, global.React);
    global.unknown = mod.exports;
  }
})(this, function (module, React) {
  'use strict';

  module.exports = React.createClass({
    displayName: 'exports',

    render: function render() {
      return React.createElement(
        'div',
        null,
        'Hello ',
        this.props.name
      );
    }
  });
});
at invariant (/Users/bshack/Sites/white-label/node_modules/react/node_modules/fbjs/lib/invariant.js:38:15)
at validateDangerousTag (/Users/bshack/Sites/white-label/node_modules/react/lib/ReactDOMComponent.js:299:74)
at new ReactDOMComponent (/Users/bshack/Sites/white-label/node_modules/react/lib/ReactDOMComponent.js:326:3)
at Object.createInternalComponent (/Users/bshack/Sites/white-label/node_modules/react/lib/ReactNativeComponent.js:68:10)
at instantiateReactComponent (/Users/bshack/Sites/white-label/node_modules/react/lib/instantiateReactComponent.js:70:39)
at /Users/bshack/Sites/white-label/node_modules/react/lib/ReactServerRendering.js:37:31
at ReactServerRenderingTransaction.Mixin.perform (/Users/bshack/Sites/white-label/node_modules/react/lib/Transaction.js:136:20)
at renderToStringImpl (/Users/bshack/Sites/white-label/node_modules/react/lib/ReactServerRendering.js:36:24)
at Object.renderToStaticMarkup (/Users/bshack/Sites/white-label/node_modules/react/lib/ReactServerRendering.js:59:10)
at /Users/bshack/Sites/white-label/test.js:11:32

当我开始删除它抱怨的行时,它一直给我同样的错误。有什么想法吗?

0 个答案:

没有答案