Uncaught SyntaxError: Unexpected token < in React答案

【问题标题】：Uncaught SyntaxError: Unexpected token < in ReactUncaught SyntaxError: Unexpected token < in React
【发布时间】：2015-03-27 09:59:40
【问题描述】：

我正在开发一个 react 项目并尝试使用 react-bootstrap 显示一个对话框。我刚刚在 js 文件中复制了一个有效的 react-bootstrap sn-p 但它对我不起作用，我在 <div className='static-modal'> 行旁边有 Uncaught SyntaxError: Unexpected token < 。

这里是js文件的内容：

(function (context) {

  // notification view
  TheGraph.Notification = React.createFactory( React.createClass({
  //TheGraph.Notification = React.createClass({
    componentDidMount: function () {
    },

    handleHide: function () {
      alert('Close me!');
    },

    render: function () {
      return (
        <div className='static-modal'>
          <Modal title='Modal title' bsStyle='primary' backdrop={false} animation={false} container={mountNode} onRequestHide={handleHide}>
            <div className='modal-body'>
              One fine body...
            </div>
            <div className='modal-footer'>
              <Button>Close</Button>
              <Button bsStyle='primary'>Save changes</Button>
            </div>
          </Modal>
        </div>
      );
    }
  });
})(this);

当我在返回行中使用 " 时，如下所示：

return ("<div className='static-modal'><Modal title='Modal title' bsStyle='primary' backdrop={false} animation={false} container={mountNode} onRequestHide={handleHide}><div className='modal-body'>One fine body...</div><div className='modal-footer'><Button>Close</Button><Button bsStyle='primary'>Save changes</Button></div></Modal></div>");

我收到此错误：

Uncaught Error: Invariant Violation: ReactCompositeComponent.render(): A valid ReactComponent must be returned. You may have returned undefined, an array or some other invalid object

知道这里的错误是什么吗？

【问题讨论】：

您是将 JSX 语法预编译成 JavaScript 还是使用浏览器转译器？
不，我不是，我只是尝试了类似的在小提琴上工作的 sn-p（没有createFactory）
除非在某处预编译，否则它是无效的。带引号的字符串不会编译成 JSX。 facebook.github.io/react/jsx-compiler.html
好的所以我必须使用babel来编译这个文件而不是直接使用我宁愿使用babel的输出
Babel 或 Facebook 的 JSX 编译器应该可以工作。

标签： javascript twitter-bootstrap reactjs react-jsx react-bootstrap

【解决方案1】：

您在render 中使用的代码是 JSX ，目前浏览器不支持 jsx 。所以我们需要transpilers 将它们转换成纯JavaScript。

您需要有一个构建过程，将您的 jsx 代码 transpiles 加载到 javascript 中，然后您应该在 HTML 中加载该 transpiled js。

但是，如果您只是想快速使用 react 而不设置构建过程，您可以转到 here 并每次手动执行此操作并将其粘贴到 render 中

React.createElement(
  'div',
  { className: 'static-modal' },
  React.createElement(
    Modal,
    { title: 'Modal title', bsStyle: 'primary', backdrop: false, animation: false, container: mountNode, onRequestHide: handleHide },
    React.createElement(
      'div',
      { className: 'modal-body' },
      'One fine body...'
    ),
    React.createElement(
      'div',
      { className: 'modal-footer' },
      React.createElement(
        Button,
        null,
        'Close'
      ),
      React.createElement(
        Button,
        { bsStyle: 'primary' },
        'Save changes'
      )
    )
  )
);

【讨论】：