如何使用 React-bootstrap 显示推荐？

Question

我有一个虚拟对象 testimonials.I 想将其显示为滑块。我正在使用 React-Bootstrap 但我无法获得所需的结果。

这是代码。

const testimonial: [
            {
              content:
                'Over all though it was a great experience and we have had lots of great feedback. We already started promoting our next event and I have been approached by 4 other companies who want to know more about it as they want to use it for their own events.',
              author: 'Sarah M., Director of Events',
          
            },
            {
              content:
                'I cannot tell you how much we loved using this silent auction software. Everything was seamless…from set up, to bidding, to payment. We will absolutely use MyEvent next year.',
              author: 'Sarah M., CCHS Foundation',
         
            },
            {
              content:
                "I tried MyEvent instead of typical paper raffle tickets. The system was easy to set up online and people who couldn't attend the event were still able to enter the raffle, which was HUGE bump in revenue.",
              author: 'Alexander B., Pan-Mass Challenge',
    
            },
            {
              content:
                'MyEvent is a great way to bring in money for your Fund A Need. The 24/7 tech support allows you to feel confident, and the platform makes your Fund a Need so much easier to run. Well definitely be using MyEvent again.',
              author: 'Amy C., One Less Orphan Fund',
       
            },
          ]
   testimonial.map((item, index) => (
              <div key={index}>
                { item.content && (
                  <div className="aceele-infos" key={index}>
                     <Carousel>
                       <Carousel.Item>
                          <Carousel.Caption>
                            <span className="signup-infos">{`"${item.content}"`}</span>
                            <div className="awnor-infos">
                                <span className="signup-infos">
                                     {`-`}
                                     {item.author}
                                </span>
                            </div>
                        </Carousel.Caption>
                    </Carousel.Item>
                  </Carousel>     
                 </div>

但是我没有得到我想要的结果。这是我想要的图像。

Answer 1

您需要映射您的轮播项目而不是整个 div，因为您只希望轮播项目在轮播内重复而不是整个轮播。

您的 return 声明将如下所示：

<div>
      <Carousel interval={1000}>
        {testimonial.map((c, index) => {
          return (
            <Carousel.Item interval={5000}>
              <div style={{ height: 500, background: "black", color: "white" }}>
                <p>{c.content}</p>
              </div>
              <Carousel.Caption>
                <p>{c.author}</p>
              </Carousel.Caption>
            </Carousel.Item>
          );
        })}
      </Carousel>
    </div>

我在下面的 codesandbox 中也有一个工作示例供您使用 https://codesandbox.io/s/interesting-aryabhata-qsb9g?file=/src/App.js:1332-1796

如何使用 React-bootstrap 显示推荐？

How to display testimonials using React-bootstrap?

reactjs

react-bootstrap