Как изменить изменить объект со стилями в компоненте (JSS, динамические стили)?

Есть объект со стилями

const styles = {
    '@global': {
        '.slider-gallery.slick-slider': {
            '& .slick-arrow': {
                width: '200px',
                height: '200px'
            },
            '& .slick-arrow.slick-prev': {
                backgroundPosition: 'center center',

                '&:before': {
                    display: 'none'
                }
            },
            '& .slick-arrow.slick-next': props => ({
                background: `url(${props.imgLeft})`,

                '&:before': {
                    display: 'none'
                }
            }),
        }
    }
};


Хочу передавать ему значение с background из компонента:

let b64 = '';

class SliderGallery extends Component {

    constructor(props) {
        super(props);
    }

    componentDidMount() {
        const icon = document.querySelector('.slick-slider__icon_left');
        const xml = new XMLSerializer().serializeToString(icon);
        const svg64 = btoa(xml);
        const b64Start = 'data:image/svg+xml;base64,';

        b64 = b64Start + svg64;
    }

    render() {

        let { settings, children } = this.props;

        return (
            <React.Fragment>
                <Slider {...settings}>
                    { children }
                </Slider>
                <Icon
                    name={'chevronleftblack'}
                    className={'slick-slider__icon_left'}
                />
            </React.Fragment>
        )
    }
}

SliderGallery.defaultProps = {
    imgLeft: b64
};

export default withStyles(styles)(SliderGallery);


Я понимаю, что так я его не передам. Потому, что не происходит обновления компонента. Как правильно это сделать ?
  • Вопрос задан
  • 111 просмотров
Решения вопроса 1
rockon404
@rockon404 Куратор тега React
Frontend Developer
1. Невозможно изменить объект, изменяя примитив, который был использован при его создании, так как значение примитива просто копируется.
Демо
Копирование по значению

2. Нельзя изменять объект свойств компонента, только передавать обновленный объект при перерисовке.

В вашем случае проще всего изменять свойство через состояние родителя, передав в компонент колбек на изменение:
<SliderGallery imgLeft={this.state.imgLeft} changeImgLeft={this.changeImgLeft} />
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы