React + Bootstrapでクラスが呼び出されない

Question

      var NavBox = React.createClass({
        render: function() {
          return (
            <div className="navbox">
              <ul class="nav nav-tabs">
                <li role="presentation" class="active"><a href="#">Home</a></li>
                <li role="presentation"><a href="#">Profile</a></li>
                <li role="presentation"><a href="#">Messages</a></li>
              </ul>
            </div>
          );
        }
      });
      ReactDOM.render(
        <NavBox />,
        document.getElementById('navi')
      );

classが呼び出されないみたいなんですが、なぜでしょうか。
あと、class="active"をボタンをクリックしたらっていうのは、
onClick()使うんでしょうか・・・。

Answer 1

reactのJSX内でclassを指定するときは，class="" ではなくて，className=""です．
また，bootstrapを利用する際は，
https://react-bootstrap.github.io/
を使いましょう．
nav-barのサンプルは

function handleSelect(selectedKey) {
  alert('selected ' + selectedKey);
}

const navInstance = (
  <Nav bsStyle="pills" activeKey={1} onSelect={handleSelect}>
    <NavItem eventKey={1} href="/home">NavItem 1 content</NavItem>
    <NavItem eventKey={2} title="Item">NavItem 2 content</NavItem>
    <NavItem eventKey={3} disabled>NavItem 3 content</NavItem>
  </Nav>
);

ReactDOM.render(navInstance, mountNode);

引用 : https://react-bootstrap.github.io/components.html#navs

にあります．
サンプルコードによると，onClickイベントではなく，onSelectですね

Comments

[YosukeNakayama]

ありがとうございます、react用のbootstrapが用意されていたとはーー！！