0

私は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スレッドに基づいていくつかの変更を加えて、それを機能させようとしましたが、喜びはありません.

私は何を間違っていますか？

4

1 に答える 1

1

閉じ括弧がありません。これを変える：

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

これに：

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

また、ボタンをレンダリングしたい場合はReact.render、plunk のサンプル コードからの呼び出しを削除する必要があります。

/*
React.render(
  <h1>Rendered from script.jsx!</h1>,
  document.getElementById('example')
);
*/
于 2015-11-01T20:56:55.810 に答える