Question

我想使用Bootstrap在ReactJS中创建表。我在下面编写了代码，并在class="container"和<div> class="table table-striped"中使用了<table>，但引导程序在此代码中不起作用。请告诉我们可能出现什么问题？

app.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>
        );
    },

的index.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>

Answer 1

在jsx中，您应该使用className关键字而不是class 例如：
<table className="table table-striped">

您可以在DOCS。

中阅读相关内容

Answer 2

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

如果您使用React with Web Components（这是不常见的），请改用class属性。

Answer 3

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

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

bootstrap在ReactJS代码中不起作用

3 个答案: