Как сделать так, чтобы приложение React отображало таблицы Bootstrap с помощью crud?

Question

Я использую следующий код для генерации простого пользовательского интерфейса и пытаюсь преобразовать его в 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, Они даже дают инструкции о том, как использовать Bootstrap с React.

Вы сказали, что вы новичок в React. Есть много движущихся частей, которые могут быть ошеломляющими, чтобы понять сначала. С помощью create-react-app Это значительно облегчит процесс обучения и поможет вам начать с минимальными трудностями.

Удачи!

Answer 2

Насколько я понимаю, вы хотите, чтобы названия и кнопки покупки / отмены покупки были в виде строки под соответствующими столбцами. В теге tr укажите каждую html-часть как тег td. См. Ниже фрагмент html:

 <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

Внимание: форма не допускается внутри таблицы. Я просто предоставляю структуру и пользовательский интерфейс, а код не тестируется.

::: структура должна что-то вроде

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>
    )
}