reactjs - 如何让我的 React 应用程序使用 CRUD 渲染 Bootstrap 表

Question

我使用以下代码生成一个简单的 UI，并尝试将其转换为使用 Bootstrap。

这是我的原始代码(使用 Skeleton )；

render:function(){
        return (
            <div className="grocery-item row">
                <div className="six columns">
                    <h4 className={this.props.item.purchased ? "strikethrough" : "" }>
                        {this.props.item.name}
                    </h4>
                </div>
                <form onSubmit={this.togglePurchased} className="three columns">
                    <button className={this.props.item.purchased ? "btn btn-danger" : "button-primary"}>{this.props.item.purchased ? "unbuy" : "buy"}</button>
                </form>
                <form className="three columns" onSubmit={this.delete}>
                    <button>&times;</button>
                </form>
            </div>
        )
    }

我尝试做这样的事情；

render:function(){
        return (        
          <table class="table table-striped">
            <thead>
              <tr>
                <th>Column 1</th>
                <th>Columan 2</th>
                <th>Columan 3</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <h4 className={this.props.item.purchased ? "strikethrough" : "" }>{this.props.item.name}</h4>
                <form onSubmit={this.togglePurchased} className="three columns">
                  <button className={this.props.item.purchased ? "btn btn-danger" : "button-primary"}>{this.props.item.purchased ? "unbuy" : "buy"}</button>
                </form>
                <form className="three columns" onSubmit={this.delete}>
                    <button>&times;</button>
                </form>
              </tr>
            </tbody>
          </table>
        )
    }

但它并没有像我预期的那样工作。我正在使用react-express-examplar作为我的出发点。

如何让 Bootstrap 表在我的 React 应用程序中工作？

Answer 1

我认为如果您使用 create-react-app 启动您的应用程序，您会更轻松。他们甚至给出instructions on how to use Bootstrap with React .

你说你是 React 新手。有很多移动部件一开始可能很难弄清楚。使用create-react-app将减少大量的学习曲线，让您更容易上手，尽可能减少摩擦。

祝你好运!