1

我正在处理一个反应项目并尝试使用 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

知道这里有什么错误吗？

4

1 回答 1

0

您在内部使用的代码render是 JSX ，目前浏览器不理解 jsx 。所以我们需要transpilers将它们转换为纯 JavaScript。

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

但是，如果您只是想快速使用 react 而不设置构建过程，您可以到这里每次手动执行并将其粘贴到里面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'
      )
    )
  )
);
于 2015-10-11T06:37:24.337 回答