引导程序在 ReactJS 代码中不起作用

Question

引导程序在 ReactJS 代码中不起作用

我想使用 Bootstrap 在 ReactJS 中创建一个表。我已经编写了下面的代码并class="container"在 in<div>和class="table table-striped"in 中使用过，<table>但是引导程序在这段代码中不起作用。请告诉可能是什么问题？

应用程序.js

render : function() {
        return (
            <div class="container">
                <table class="table table-striped">
                    <tbody>
                    {this.state.rows.map((r) => (
                        <tr>
                            <td>{r}</td>
                            <td>
                                <button onClick={() => this.deleteRow(r)}>Delete</button>
                            </td>
                        </tr>
                    ))}
                    </tbody>
                </table>
                <input trype="text" id={"newVal"} onChange={this.updateNewValue}></input>
                <button id="addBtn" onClick={this.addRow}>ADD</button>
            </div>
        );
    },

Run Code Online (Sandbox Code Playgroud)

索引.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Sample Project</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <link href="http://maxcdn.bootstrapcdn.com/bootswatch/3.3.4/flatly/bootstrap.min.css" type="text/css" rel="stylesheet" />

    <script src="app.js" type="text/babel"></script>
</head>
<body>
    <div id="display"></div>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

Answer 1

小智 5

在 src/index.js 文件的开头导入 Bootstrap CSS 和可选的 Bootstrap 主题 CSS：

import 'bootstrap/dist/css/bootstrap.css';

Run Code Online (Sandbox Code Playgroud)

归档时间：	8 年，8 月前
查看次数：	3919 次
最近记录：	4 年，9 月前