Блог

Главная - Вопросы по программированию - Перемещение элемента карусели в другой класс не работает [Реагировать]

Перемещение элемента карусели в другой класс не работает [Реагировать]

#reactjs #carousel #react-bootstrap

#reactjs #карусель #react-bootstrap

Вопрос:

РЕДАКТИРОВАТЬ: ссылка на CodeSandbox — https://codesandbox.io/s/lucid-boyd-9tqhg?file=/src/HomeCarousels.js

Следующий код работает нормально:

             <Carousel>
                <Carousel.Item>
                    <img
                    className="d-block w-100"
                    src="https://www.fg-a.com/wallpapers/2019-black-fantasy-sky.jpg"
                    alt="Second slide"
                    />
                    <Carousel.Caption>
                    <h3>Second slide label</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                    </Carousel.Caption>
                </Carousel.Item>

                <Carousel.Item>
                    <img
                    className="d-block w-100"
                    src="https://www.fg-a.com/wallpapers/black-circles-2018.jpg"
                    alt="Third slide"
                    />
                    <Carousel.Caption>
                    <h3>Third slide label</h3>
                    <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
                    </Carousel.Caption>
                </Carousel.Item>
            </Carousel>

Однако, когда я пытаюсь реорганизовать его, переместив одну карусель.Элемент в свой собственный компонент React, я сталкиваюсь с проблемами.

SingleCarousel.js

 class SingleCarousel extends React.Component {

    render() {
        return (
            <Carousel.Item>
                <img
                    className="d-block w-100"
                    src={this.props.imgPath}
                    alt={this.props.header}
                />
                <Carousel.Caption>
                    <h3>{this.props.header}</h3>
                    <p>{this.props.content}</p>
                </Carousel.Caption>
            </Carousel.Item>
        );
    }

}

Main.js (в настоящее время просто заменяю одну карусель экземпляром класса):

             <Carousel>
                <SingleCarousel
                    imgPath="https://www.fg-a.com/wallpapers/2019-black-fantasy-sky.jpg"
                    header="Second slide label"
                    content="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
                />

                <Carousel.Item>
                    <img
                    className="d-block w-100"
                    src="https://www.fg-a.com/wallpapers/black-circles-2018.jpg"
                    alt="Third slide"
                    />
                    <Carousel.Caption>
                    <h3>Third slide label</h3>
                    <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
                    </Carousel.Caption>
                </Carousel.Item>
            </Carousel>

Во втором случае первый элемент карусели не отображается на странице. Тем не менее, я вижу элемент DOM, присутствующий в дереве DOM. При проверке в Chrome проблема заключается в том, что div «carousel-item» для первого элемента никогда не меняется на «активный элемент карусели». На самом деле у меня более двух элементов, поэтому я вижу, что он перебирает все элементы, но не может преобразовать элемент компонента в активный, поэтому он не отображается. Почему я испытываю такое поведение? Разве две части кода не эквивалентны и не должны приводить к одинаковому поведению?

Комментарии:

1. Лучше добавить пример кода в codesandbox для отладки

2. оба кода эквивалентны, вы делаете что-то не так, пожалуйста, создайте его демонстрацию, чтобы мы могли решить вашу проблему как можно скорее

3. @A.R.SEIF спасибо за предложение, добавлена ссылка codesanbox, о которой идет речь.

4. Пожалуйста, добавьте второй подход (с проблемами) в codesandbox

Ответ №1:

Я думал, что оба кода эквивалентны, но это не так, поэтому один из ответов — заменить Carousel.Item на Fragment в вашем SingleCarousel и вызвать его как

 <Carousel.Item>
  <SingleCarousel
    imgPath="https://www.fg-a.com/wallpapers/black-with-stars.jpg"
    header="First slide label"
    content="Placeholder text"
  />
</Carousel.Item>

Carousel.Item требуется для перехода, поэтому вам нужно добавить это перед вызовом чего-либо

Codesandbox: https://codesandbox.io/s/purple-wave-3300o?file=/src/HomeCarousels.js