获取 bootstrap 元素以在 plunker 上呈现

Question

我是 React 和 React 的新手-bootstrap 所以我想我会先在 plunker 上渲染一个 bootstrap 组件。

事实证明，这比我想象的要难，我不确定我到底做错了什么。

这是原话：http://plnkr.co/edit/mVBVhT1FDliyDpzTR7PJ?p=preview

<!DOCTYPE html>
<html>

  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.1/react.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.1/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.27.3/react-bootstrap.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script>
  var Alert = ReactBootstrap.Alert;
    </script>
  </head>

  <body>
    <div id="example"></div>
    <script src="script.js"></script>

  </body>

</html>

在 plunk 上的 jsx 文件中：

var ButtonToolbar = ReactBootstrap.ButtonToolbar;
var Button = ReactBootstrap.Button;
var buttonsInstance = (
  <div>
    <ButtonToolbar>
      <Button bsStyle="primary" bsSize="large">Large button</Button>
      <Button bsSize="large">Large button</Button>
    </ButtonToolbar>
    <ButtonToolbar>
      <Button bsStyle="primary">Default button</Button>
      <Button>Default button</Button>
    </ButtonToolbar>
    <ButtonToolbar>
      <Button bsStyle="primary" bsSize="small">Small button</Button>
      <Button bsSize="small">Small button</Button>
    </ButtonToolbar>
    <ButtonToolbar>
      <Button bsStyle="primary" bsSize="xsmall">Extra small button</Button>
      <Button bsSize="xsmall">Extra small button</Button>
    </ButtonToolbar>
  </div>
);

React.render(buttonsInstance, document.getElementById('example');

我只是粘贴了示例，然后根据一些 github 线程进行了一些更改以尝试使其正常工作，但我并不高兴。

我做错了什么？

Answer 1

您缺少一个右括号。改变这个：

React.render(buttonsInstance, document.getElementById('example');

进入这个：

React.render(buttonsInstance, document.getElementById('example'));

此外，如果您想要呈现按钮，您应该删除来自 plunk 示例代码的对 React.render 的调用：

/*
React.render(
  <h1>Rendered from script.jsx!</h1>,
  document.getElementById('example')
);
*/

获取 bootstrap 元素以在 plunker 上呈现

Getting a bootstrap element to render on plunker

reactjs

react-bootstrap