Próbuję utworzyć suwak obrazu za pomocą pakietu reaguj-slick. Jednak chcę, aby był to komponent wielokrotnego użytku i nie musiał tworzyć komponentu suwaka dla każdej strony. Tak więc próbowałem napisać to za pomocą rekwizytów i stanów, ale nadal nie mogę go uruchomić. Mój problem polega na tym, że nie wiem, jak włączyć rekwizyty do stanu, jeśli jest to w ogóle możliwe. Górny blok jest moim problemem, ponieważ wiem, że nie czyta rekwizytów. Próbuję uzyskać dane z innego komponentu obrazu, który pobiera adres URL obrazu na mojej stronie głównej.

class ImageCarousel extends React.Component {
    constructor(props){
        super(props);
    state = {
        images: [
            {url: {props.url1}},
            {url:{props.url2}},
            {url:{props.url3}},
            {url:{props.url4}} 
        ]
    }
    }
    render(){


        const settings = {
            dots: true,
            infinite: true,
            speed: 500,
            slidesToShow: 1,
            slidesToScroll: 1,
            arrows: true,
            className: "slides"
          };
          return(
            <div className='ImageCarousel' style={{padding:30}}>
                <Slider {...settings}>
                <div>
                    {this.state.images[0].url}
                </div>
                <div>
                    {this.state.images[1].url}
                </div>

                 <div>
                    {this.state.images[2].url}
                </div>
                <div>
                    {this.state.images[3].url}
                </div>
                </Slider>
            </div>
        )

    }
}

export default ImageCarousel;
0
eizenyamakichi 27 marzec 2020, 14:10

2 odpowiedzi

Najlepsza odpowiedź

Problem polega na tym, jak generujesz obiekty url w tablicy images.

Zawijasz plik props.url w drugi obiekt, który nie działa:

constructor(props){
    super(props);
        this.state = {
            images: [
                {url: props.url1},
                {url: props.url2},
                {url: props.url3},
                {url: props.url4} 
            ]
        }
    }

Aby użyć nazw domyślnych, musi to być zmienna:

const url = 'Test'
const obj = {url} // {url: Test}
0
Domino987 27 marzec 2020, 11:22

Spróbuj zaktualizować konstruktora za pomocą następującego kodu

constructor(props){
    super(props);
    this.state = {
        images: [
            {url: {props.url1}},
            {url:{props.url2}},
            {url:{props.url3}},
            {url:{props.url4}} 
        ]
    }
}

Problem polega na tym, jak ustawić stan lokalny. this powinno być używane do odniesienia się do właściwości instancji, na przykład this.state. Podczas gdy state zachowuje się jak nazwa zmiennej globalnej.

0
Sergii Shvager 27 marzec 2020, 11:17