Question

React的新手（通常在JS上并不十分有效），可以使用一些指导来设置它。我正在尝试使用React / JSX在数组中的各个轮播项目中呈现无序列表。到目前为止，我的轮播工作正常，但是我对如何将数组项分组到单独的列表感到困惑。

我的代码：

$('.carousel-inner>.item:first-child').addClass('active');

const carouselItems = [
    'This is a carousel text message 1',
    'This is a carousel text message 2',
    'This is a carousel text message 3',
    'This is a carousel text message 4',
    'This is a carousel text message 5',
    'This is a carousel text message 6'
];

const carouselTest = carouselItems.map((word, idx) => { return <div className='item' key={idx}><ul><li>{word}</li></ul></div>})

ReactDOM.render(
    <div id="carousel-example-generic" className="carousel slide" data-ride="carousel" data-interval="false">
        <div className="carousel-inner">
            {carouselTest}
        </div>
    </div>, document.getElementById('carousel_facts')
);

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

<div id="carousel_facts"></div>

<div class="controls testimonial_control">
<a class="left fa fa-chevron-right btn btn-default testimonial_btn" href="#carousel-example-generic" data-slide="prev">Previous</a>
  <a class="right fa fa-chevron-right btn btn-default testimonial_btn" href="#carousel-example-generic" data-slide="next">Next</a>
</div>

我想从代码中将文本1-3和4-6分成两个单独的轮播项目，因此最终结果看起来像这样。

<div class="item active">
  <ul>
    <li>This is a carousel text message 1</li>
    <li>This is a carousel text message 2</li>
    <li>This is a carousel text message 3</li>
  </ul>
</div>
<div class="item">
  <ul>
    <li>This is a carousel text message 4</li>
    <li>This is a carousel text message 5</li>
    <li>This is a carousel text message 6</li></ul>
</div>

我是否必须要做多个变量才能完成此任务，还是我会完全以错误的方式进行操作？任何帮助，将不胜感激。谢谢。

Answer 1

import React from "react";
import ReactDOM from "react-dom";

const firstList = [
    "This is a carousel text message 1",
    "This is a carousel text message 2",
    "This is a carousel text message 3"
]

const secondList = [
    "This is a carousel text message 4",
    "This is a carousel text message 5",
    "This is a carousel text message 6"
]

ReactDOM.render(
    <div id="carousel-example-generic" className="carousel slide" data-ride="carousel" data-interval="false">
        <div className="carousel-inner">
            <div className="item active">
               <ul>
                  {
                      firstList.map((item, idx) => <li key={idx}>{item}</li>)
                  }
               </ul>
            </div>
            <div className="item">
               <ul>
                  {
                      secondList.map((item, idx) => <li key={idx}>{item}</li>)
                  }
               </ul>
            </div>
        </div>
    </div>, document.getElementById('carousel_facts')
)

React：在数组的引导轮播项目中显示无序列表

1 个答案: