Question

我有一个可在页面上显示Json数据的React App

这是JSON文件

[
   {
      "name":"Apple",
      "price":"3,99",
      "description":"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.",
      "image":"apple.jpg",
      "profileUrl":"www.google.com"
   },
     {
      "name":"Banana",
      "price":"1,99",
      "description":"Sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.",
      "image":"banana.jpg",
      "profileUrl":"#"
   },
   {
      "name":"Watermelon",
      "price":"1,50",
      "description":"At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.",
      "image":"watermelon.png",
      "profileUrl":"#"
   },
   {
      "name":"Strawberry",
      "price":"7,99",
      "description":"Stet clita kasd gubergren.",
      "image":"strawberry.jpg",
      "profileUrl":"#"
   },
   {
      "name":"Mango",
      "price":"4,99",
      "description":"Labore et dolore magna aliquyam erat, sed diam voluptua.",
      "image":"mango.jpg",
      "profileUrl":"#"
   },
   {
      "name":"Lemon",
      "price":"2,00",
      "description":"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.",
      "image":"lemon.png",
      "profileUrl":"#"
   },
   {
      "name":"Coconut",
      "price":"5,50",
      "description":"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.",
      "image":"coconut.jpg",
      "profileUrl":"#"
   }
]

正如您在下面看到的，我将它们显示在一列中，我要做的是在每三个项目之后添加一列分隔符。因为我想连续只有3个产品。我从引导程序

使用此布局

<div class="container">
  <div class="row">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="w-100"></div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

React中是否有逻辑，它每3个产品后会返回此行？

import React, { Component } from 'react'
import ProductInfo from '../plist.json'


class Products extends Component {


  render() {
    return (
      <div>
        {ProductInfo.map((postDetail, index) => {
          return (
            <div>
              <div class="container">
                <div class="row">
                  <div class="col">
                    <h1>{postDetail.name}</h1>
                    <img src={require(`./${postDetail.image}`)}/>
                    <p>{postDetail.price}</p>
                    <p>{postDetail.description}</p>


                  </div>
                </div>
              </div>
            </div>
          )
        })}
      </div>
    )
  }
}

export default Products

Answer 1

您可以利用Bootstrap的列系统每行显示3列。每行由12列组成。因此，要显示3个部分，您需要将12除以3并获得4的列大小。

import React, { Component } from 'react'
import ProductInfo from '../plist.json'


class Products extends Component {


  render() {
    return (
      <div className="container>
         <div className="row">
            {ProductInfo.map((postDetail, index) => {
              return (
                 <div className="col-md-4">
                    <h1>{postDetail.name}</h1>
                    <img src={require(`./${postDetail.image}`)}/>
                    <p>{postDetail.price}</p>
                    <p>{postDetail.description}</p>
                 </div>
               )
           })}
         </div>
      </div>
    )
  }
}

export default Products

如何在Bootstrap列中显示Json数据

1 个答案: