javascript - 未捕获的语法错误 : Unexpected token < in React

Question

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

这是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);

当我将 use "放在返回行中时，如下所示:

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

知道这里有什么错误吗？

Answer 1

您在 render 中使用的代码是 JSX ，浏览器目前无法理解 jsx 。因此我们需要转译器将它们转换为纯JavaScript。

您需要有一个构建过程，将 jsx 代码转换为 javascript，然后您应该在 HTML 中加载该转换 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'
      )
    )
  )
);