Question

我正在研究一个反应项目并试图显示一个带有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);

当我按照以下方式使用“返回行：

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。所以我们需要transpilers将它们转换为纯JavaScript。

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

但是，如果您只是想快速想要在没有设置构建过程的情况下进行反应，那么您可以here每次都手动执行此操作并将其粘贴到transpiled

内

render

未捕获的SyntaxError：意外的令牌＆lt;在React

1 个答案: