React.js 没有在按钮上提取 bootstrap 格式

React.js doesn't pick-up bootstrap formatting on buttons

我只是将一些代码从 backbone.marionette 移植到 react.js 并且我注意到浏览器似乎无法获取按钮的格式,尽管它总是习惯于何时与 backbone.marionette.

合作

相关HTML/Javascript代码:

<!doctype html>
<html ng-app="myApp">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>The Order of the Mouse</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/jpg" href="./ico/favicon.jpg">
    <meta name="description" content="Psychological horror/detective/spiritual RPG set the medieval, magical future world of 2079; Web-Based">
    <meta name="keywords" content="RPG, Horror, Detective, Order of the Mouse, Rabbit-Cat, Dragon-Bear, Clown-Fox, Deer-Wolf">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/style.css">
    <script src="./js/vendor/jquery-1.11.3.min.js"></script>
    <script src="./js/vendor/bootstrap.min.js"></script>
    <script src="./js/vendor/underscore-min.js"></script>
    <script src="./js/vendor/backbone-min.js"></script>
    <script src="./js/vendor/backbone.marionette.min.js"></script>
    <script src="./js/vendor/react.min.js"></script>
    <script src="./js/vendor/react-dom.min.js"></script>
    <script src="./js/vendor/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
    <link href='https://fonts.googleapis.com/css?family=Roboto:500,300,700,200' rel='stylesheet' type='text/css'>
    <link href="css/main.css" rel="stylesheet" />
  </head>
  <body>

  <div class="main" ng-controller="MainController">
  <!-- Main Header -->
    <div class="jumbotron" id="top-bar">
    <div class="container" id="header"><h1 id="title-text1"><span class="brand">ORDER of the MOUSE: Alpha</span></h1>
      <img id="deer-wolf" height="128" width="128" src="./img/alphaDeer-Wolf_small.png" alt="deer-wolf">
      <img id="tiger-humming" height="92" width="128" src="./img/alphaTiger-Humming_small.png" alt="tiger-hummingbird">
      <h4 id="main-sub">Rabbit-Cat, Dragon-Bear and Clown-Fox experience horror in the Castle of Cages and Revolving Walls.</h4>
      </div>
  </div>
</div>

<!-- MVC starts here-->
<div id="content"></div>
<script type="text/babel">
     var StoryBox = React.createClass({
       render: function() {
         return (
         <div className="storybox">
         <p><em>You are Drogon Barre, aka Dragon-Bear.</em></p>
         <p>The date is October 3rd. You are sitting quietly at your father's house when a letter arrives through the door with details of a rape and murder. The letter says that the murder was committed by a member of the infamous cult <strong>The Order of the Mouse</strong>. The writer claims the victim was her sister and that she looked on powerless as the assailant took her sister's life. She claims that the perpetrator currently resides in a hotel just outside Plymouth. The letter gives the address but no further details.</p>

         <p>Do you choose to investigate?</p><button type="button" class="btn btn-success" id="yesbtn">Yes</button><button type="button" class="btn btn-danger" id="nobtn">No</button>
          </div>
       );
     }
   });
   ReactDOM.render(
     <StoryBox />,
     document.getElementById('content')
   );
       </script>


      <!-- Modules -->
      <script src="js/app.js"></script>
      <script src="js/page-move.js"></script>
      <script src="js/audioset.js"></script>

      <!-- Controllers -->
      <script src="js/controllers/MainController.js"></script>
      <script src="js/controllers/StoryController.js"></script>
      <script>
    </body>
  </html>

为什么 bootstrap 不自动设置按钮样式? Bootstrap 肯定正在加载,并且 Firefox 中的调试器没有抛出任何错误。

要设置 class 属性,您应该使用 className 而不是 class

<button type="button" className="btn btn-success" id="yesbtn">Yes</button>
<button type="button" className="btn btn-danger" id="nobtn">No</button>

Example