Mam naprawdę prosty HOC, którego kod to

import React from 'react';

const withRandomImage = Comp => props => {
  const x = Math.floor(Math.random() * 26);
  return <Comp {...props} image={x} /> 
}

export default withRandomImage;

Działa ze składnikiem ImageBar, którego kod to

import React from 'react';
import styled from 'styled-components';

import withRandomImage from '../../hocs/WithRandomImage';

const Bar = styled.div`
    display: block;
    height: 310px;
    background-image: url(${props => props.image});
    background-size: cover;
    background-position: 0px -400px;
    background-repeat: no-repeat;
`

const formatWrapper = {
    width: "100%",
    height: "310px"
}

class ImageBar extends React.Component {

    getBgImage = () => {
        console.log(window.location.origin);
        return window.location.origin + '/hp/' + this.props.image + '.jpg';
    }

    render() {
        console.log("Image: ",this.getBgImage());
        return (
            <Bar className="ImageBar" image={this.getBgImage()}>
                <div className="container-fluid">
                    <div className="row align-items-center" style={formatWrapper}>
                        {this.props.inner}
                    </div>
                </div>
            </Bar>
        )
    }
}

export default withRandomImage(ImageBar);

Chodzi o to, aby losowy obraz był wyświetlany jako obraz tła za każdym razem, gdy strona jest odświeżana. Obrazy są dostarczane z folderu /hp/ w katalogu public Reacta.

Wszystko działa dobrze, gdy komponent jest renderowany po raz pierwszy. Ale wewnątrz tego ImageBar mam kilka komponentów (przekazanych w this.props.inner) z dołączonymi odbiornikami zdarzeń. Za każdym razem, gdy zostanie wywołany identyfikator zdarzenia, obraz tła znika.

To jest przykład komponentu, w którym to ImageBar jest renderowane.

render() {
    return (
        <div>
            <Header />
            <ImageBar inner={this.getSearchBar()} />
        </div>
    )
}

Myślę, że jest to coś związanego z cyklem życia komponentów, ale nie mogę dokładnie określić, co się dzieje.

Jakieś sugestie?

0
Ed de Almeida 17 grudzień 2019, 04:53

1 odpowiedź

Najlepsza odpowiedź

Myślę, że math.random() * 26 generuje adres URL, który nie ma odpowiedniego obrazu w Twoim folderze hp. Sprawdziłeś to?

Pamiętaj, że każdy render wygeneruje nową losową wartość i nową właściwość. Możesz „zamrozić” go do „pierwszej” wygenerowanej wartości, przenosząc generowanie liczby poza ulepszony komponent.

Coś w stylu

const withRandomImage = Comp => {
    const x = Math.floor(Math.random() * 26);
    // when rereder occurs, only the code below will be run - so the image is always the same
    return props => <Comp {...props} image={x} />
}
1
Gonzalo.- 17 grudzień 2019, 03:29