reactjs – 如何让我的React应用程序使用crud渲染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作为我的起点.

如何在我的React应用程序中使用Bootstrap表？