如何使用 React-Bootstrap 根据项目计数创建带有拼接的轮播项目

Question

我正在尝试拼接，以便每个页面（活动和其他项目）显示 3 个项目。但这不起作用。有人可以帮忙吗？

下面是代码：

var Cards1= filter.splice(0, Math.ceil(filter.length / 3)).map( item => {
  return (
    <div class="cards">
    <div class="title">
    <h6><b>{item.Name }</b></h6>
    </div>
    <div class="des">
    <p> {item.DescriptionEN}</p>
    </div>
    </div>
  )
})
var Cards2= filter.splice(filter.length / 3).map( item => {
  return (
    <div class="cards">
    <div class="title">
    <h6><b>{item.Name }</b></h6>
    </div>
    <div class="des">
    <p> {item.DescriptionEN}</p>
    </div>
    </div>
  )
})
<div class="main">
<div id="inam" class="carousel slide" data-ride="carousel" >
<div class="carousel-inner">
<div class="carousel-item active">
<div class="card-deck">
{Cards1}
</div>
</div>
<div class="carousel-item">
<div class="card-deck">
{Cards2}
</div>
</div>

Answer 1

请试试这个。

class App extends Component {
  constructor (props) {
    super(props)
    this.state = {
      filter: [
        {
          name: "AAA",
          description: "BBB"
        }
      ]
    }
  }

  renderCards = (cards) => (
    cards.map(item => (
      <div class="cards">
        <div class="title">
          <h6><b>{item.name}</b></h6>
        </div>
        <div class="des">
          <p>{item.description}</p>
        </div>
      </div>
    ))
  )

  getSeparatedArray = (array) => {
    const res = [];
    for (let i = 0; i < array.length; i += 3) {
        const temp = array.slice(i, i + 3);
        res.push(temp);
    }
    return res;
  }

  render () {
    const { filter } = this.state
    const cardsList = this.getSeparatedArray(filter)

    return (
      <div class="main">
        <div id="inam" class="carousel slide" data-ride="carousel" >
          <div class="carousel-inner">
            {
              cardsList.map(cards => (
                <div class="carousel-item">
                  <div class="card-deck">
                    {this.renderCards(cards)}
                  </div>
                </div>
              ))
            }
          </div>
        </div>
      </div>
    )
  }
}