response-id-swiper не работает с картами Dynami c - PullRequest
Новая
       3

response-id-swiper не работает с картами Dynami c

2 голосов
/ 14 января 2020

У меня есть компонент карт reactJS, который извлекает данные из strapi, а затем я использую реагирующий id-swiper с картами Dynami c, построенными на go. Теперь ответная-id-swiper работает нормально, если я жестко закодировал карты. Но не работает с логи c. Я вставляю код для карточек. 

`import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import './desktop-card.module.css';
import Swiper from 'react-id-swiper';
import 'swiper/css/swiper.css';



const params = {
    direction: 'horizontal',
    loop: true,
    slidesPerView: 'auto',
    mousewheel: true,
    autoPlay: {
        delay: 2000
    }
}

const Cards = props => {
    const singleCard = props.cardsData.map((card, index) => {
        return (
            <React.Fragment key={index}>
                <div className="scene scene--card swiper-slide">
                    <div className="mojo-card d-flex flex-column" style={{backgroundColor:card.backgroundColor}}>
                        <h3 className="heading py-4 px-4">{card.heading}</h3>
                        <p className="card-content px-4">{card.content}</p>
                        <div className="mojo-card__img card-img-data">
                            <img alt={'image'+card.id}/>
                        </div>
                    </div>
                </div>
            </React.Fragment>
        )
    });
    return <React.Fragment>{singleCard}</React.Fragment>
}

class DeskTopCards extends Component {
    render() {   
        const { cardsData } = this.props;
        if(!this.props) return null;
        return ( 
            <Swiper {...params}>
                <Cards cardsData={cardsData}/>
            </Swiper>
        )
    }
}

export default DeskTopCards;

`

Пожалуйста, помогите. Я новичок в ReactJS.

Вот код родительских компонентов. Данные карты не пустые. 

```
import React from 'react';
import ReactDOM from 'react-dom';
import DesktopCards from './Desktop-card/desktop-card';

class CardContainer extends React.Component {
    state = {
        data: []
    }
    componentDidMount() {
        const url = '';// strapi url

        fetch(url)
            .then(result => result.json())
            .then(result => {
                this.setState({
                    data: result
                });
            });
    }

    render() {
        const { data } = this.state;
        return (
            <div className="col-lg-7 col-md-7 px-0 box d-flex w-100 flex-row align-items-center justify-content-center right-side-scroll">
                   <DesktopCards cardsData={data}/>
            </div>
        )
    }
}

export default CardContainer;
```

1 Ответ

0 голосов
/ 13 марта 2020

Возможно, уже слишком поздно, но я тоже наткнулся на это. Хитрость в документации, но ее довольно легко пропустить. Изображение из документации по github Это означает, что для любого пользовательского компонента вам нужно обернуть его элементом html, таким как div. Так, например: 

<Swiper>
 <div><Card1/></div>
 <div><Card2/></div>
 <div><Card3/></div> 
</Swiper>

Отстой, чтобы сделать это, но если вам необходимо использовать библиотеку, это должно сделать.

...