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

Question

[Владимир Голубь]

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

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);

Я понимаю, что так я его не передам. Потому, что не происходит обновления компонента. Как правильно это сделать ?

Answer 1

[Антон Спирин]

1. Невозможно изменить объект, изменяя примитив, который был использован при его создании, так как значение примитива просто копируется.
Демо
Копирование по значению

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

В вашем случае проще всего изменять свойство через состояние родителя, передав в компонент колбек на изменение:

<SliderGallery imgLeft={this.state.imgLeft} changeImgLeft={this.changeImgLeft} />

Comments

[Владимир Голубь]

Антон Спирин делал как написано тут https://cssinjs.org/react-jss/?v=v10.0.0-alpha.16#...

[Антон Спирин]

Владимир Голубь, ясно. У вас другая библиотека. Да, тут defaultProps используются.
Обновил ответ.

[Антон Спирин]

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

Самый прямой путь помимо указания свойства напрямую это изменить свойство через состояние родителя:

class Parent extends React.Component {
  state = { imgLeft: '' };

  changeImgLeft = (imgLeft) => {
    this.setState({ imgLeft });
  };
  // ...
}

<SliderGallery imgLeft={this.state.imgLeft} changeImgLeft={this.changeImgLeft} />

class SliderGallery extends Component {
  componentDidMount() {
    // ...
    this.props.changeImgLeft(b64Start + svg64);
  }