Question

这是我的HTML文件：

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <link rel="stylesheet" href="{{ url_for('static',filename='styles/bootstrap.min.css') }}">
        <link rel="stylesheet" type="text/css" href= "{{ url_for('static',filename='styles/style.css') }}">
        <script src="https://npmcdn.com/react@15.3.0/dist/react.js"></script>
        <script src="https://npmcdn.com/react-dom@15.3.0/dist/react-dom.js"></script>
        <script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.30.7/react-bootstrap.js"></script>
        <meta charset="utf-8">
        <title>Dashboard</title>

    </head>
    <body>
        <div id="content"></div>
        <script type="text/babel" src="/static/js/dashboard.js"></script>
    </body>
</html>

该文件位于：

/Simple_flask_app
 -hello.py

  /static
    -js

  /styles
    -boostrap.min.css
    -style.css

我创建了一个简单的组件，试图让CSS加载：

var Dashboard = React.createClass({
    render: function(){
         return (
             <div>
                 <div class="jumbotron">
                     <h1>Test</h1>
                 </div>
              </div>
             )

ReactDOM.render(<Dashboard />, document.getElementById('content'));

我试图加载这个巨大的灰色框 - https://getbootstrap.com/examples/navbar/

我必须做一些特别的事情因为我在React吗？

Answer 1

在React的JSX中，你必须使用'className'而不是'class'。

因此，您应该将<div class="jumbotron">更改为<div className="jumbotron">

无法在React App中加载Boostrap CSS

1 个答案: