如何让我的 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 会减少很多学习曲线，让您在尽可能少的摩擦的情况下更容易上手。

祝你好运！

Answer 2

据我了解，您希望名称和购买/取消购买按钮在相应的列下连续出现。 在 tr 标签中，将每个 html 部分作为 td 标签 请参考下面的html sn-p：

 <td>
  <h4 class="strikethrough">
                    name
  </h4>
</td>
<td>
  <form class="three columns">
      <button class="btn btn-info">buy</button>
  </form>
</td>
<td>
  <form class="three columns">
      <button>&times;</button>
  </form>
</td>

请尝试修改组件渲染方法中的html，类似。

Answer 3

您将表格添加到错误的组件。它必须在 GroceryItemList.jsx 上

注意：表格内不允许有表格。我只是提供结构和 UI，代码未经测试。

::: 结构应该类似于-

GroceryItemList.jsx 组件::::

render:function(){
        return (
            <div>
                <table className="table">
                    <thead>
                      <tr>
                        <th>Column 1</th>
                        <th>Columan 2</th>
                        <th>Columan 3</th>
                      </tr>
                    </thead>
                    <tbody>
                        {this.props.items.map((item,index)=>{
                            return (
                                <GroceryItem item={item} key={"item"+index} />
                            )
                        })}
                        <GroceryListAddItem />
                    </tbody>
                </table>
            </div>
        )
    }

GroceryItem.jsx 组件::::

render:function(){
    return (
        <tr>
            <td>
                <h4 className={this.props.item.purchased ? "strikethrough" : "" }>
                    {this.props.item.name}
                </h4>
            </td>
            <td>
                <form onSubmit={this.togglePurchased}>
                    <button className={this.props.item.purchased ? "" : "button-primary"}>{this.props.item.purchased ? "unbuy" : "buy"}</button>
                </form>
            </td>
            <td>
                <form onSubmit={this.delete}>
                    <button>&times;</button>
                </form>
            </td>
        </tr>
    )
}