无法使用 Bootstrap 样式格式化 React 组件答案

【问题标题】：Cant get React component to format with Bootstrap style无法使用 Bootstrap 样式格式化 React 组件
【发布时间】：2018-03-14 02:56:02
【问题描述】：

做一个基本示例，但引导样式不适用于来自 React 组件的按钮。它确实适用于 HTML 文件中的按钮。我在 HTML 文件中提供了来自 CDN 的引导 css。在一个简单的 python web 服务器上运行（python -m http.server 8001）。什么给了？

example1.jsx：

// example1.jsx:
var MyPulldown = React.createClass({
    render: function () {
        return <div class="dropdown">
             <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
               Second Dropdown
             </button>
             <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
               <a class="dropdown-item" href="#">Action</a>
               <a class="dropdown-item" href="#">Another action</a>
               <a class="dropdown-item" href="#">Something else here</a>
             </div>
           </div>
    }
});


React.render(
  <div>
     <MyPulldown/>
  </div>,
  document.getElementById('container')
);

example1.html

<!-- example1.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">

<!-- The core React library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.12.2/react.js"></script>
<!-- In-browser JSX transformer, remove when pre-compiling JSX. -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.12.2/JSXTransformer.js"></script>

<script type="text/jsx" src="example1.jsx"></script>
</head>
<body>
    <div class="dropdown">
        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            First Dropdown
        </button>
        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
        </div>
    </div>
    <div id='container' class="form-group">

    </div>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</body>
</html>

【问题讨论】：

标签： javascript html css twitter-bootstrap reactjs

【解决方案1】：

在 react class 中保留属性。你需要使用className

类名

要指定 CSS 类，请使用 className 属性。这适用于所有常规 DOM 和 SVG 元素，例如 <div>、<a> 等。

var MyPulldown = React.createClass({
    render: function () {
        return <div className="dropdown">
             <button className="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
               Second Dropdown
             </button>
             <div className="dropdown-menu" aria-labelledby="dropdownMenuButton">
               <a className="dropdown-item" href="#">Action</a>
               <a className="dropdown-item" href="#">Another action</a>
               <a className="dropdown-item" href="#">Something else here</a>
             </div>
           </div>
    }
});

【讨论】：